Duration Picker

v1.0.0-rc.7
@ui5/webcomponents
<ui5-duration-picker>

Basic Duration Picker

<ui5-duration-picker value="10:30"></ui5-duration-picker>
	

Duration Picker With Steps

<ui5-duration-picker value="05:08:32" seconds-step="5" minutes-step="10"></ui5-duration-picker>
	

Duration Picker With No Seconds, Minutes or Hours

<ui5-duration-picker value="05:00" hide-seconds></ui5-duration-picker>
<ui5-duration-picker value="01:30" hide-minutes></ui5-duration-picker>
<ui5-duration-picker value="10:30" hide-hours></ui5-duration-picker>
	

Duration Picker With Seconds & Max Value

<ui5-duration-picker value="05:40:30" max-value="05:30:00" show-seconds></ui5-duration-picker>
	

Overview

The ui5-duration-picker component provides an input field with assigned sliders which opens on user action. The ui5-duration-picker allows users to select a time duration. It consists of two parts: the time input field and the sliders.

Usage

The Duration Picker is used for input of time. Users are able to select hours, minutes and seconds. The user can enter a time by:
  • Using the sliders that opens in a popup
  • Typing it in directly in the input field


When the user makes an entry and chooses the enter key, the sliders shows the corresponding time. When the user directly triggers the sliders display, the actual time is displayed. For the ui5-duration-picker

Keyboard handling

[F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.
When closed:
  • [PAGEUP] - Increments hours by 1. If max value is reached, the slider doesn't increment.
  • [PAGEDOWN] - Decrements the corresponding field by 1. If min value is reached, the slider doesn't increment.
  • [SHIFT]+[PAGEUP] Increments minutes by 1.
  • [SHIFT]+ [PAGEDOWN] Decrements minutes by 1.
  • [SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.
  • [SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.
When opened:
  • [UP] If focus is on one of the selection lists: Select the value which is above the current value. If the first value is selected, select the last value in the list.
  • [DOWN] If focus is on one of the selection lists: Select the value which is below the current value. If the last value is selected, select the first value in the list.
  • [LEFT] If focus is on one of the selection lists: Move focus to the selection list which is left of the current selection list. If focus is at the first selection list, move focus to the last selection list.
  • [RIGHT] If focus is on one of the selection lists: Move focus to the selection list which is right of the current selection list. When focus is at the last selection list, move focus to the first selection list.
  • [PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.
  • [PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.

ES6 Module Import

import @ui5/webcomponents/dist/DurationPicker.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Determines whether the ui5-duration-picker is displayed as disabled.
hideHours
hide-hours
boolean
false
Defines whether the slider for hours will be available. By default there are sliders for hours, minutes and seconds.
since v1.0.0-rc.8
hideMinutes
hide-minutes
boolean
false
Defines whether the slider for minutes will be available. By default there are sliders for hours, minutes and seconds.
since v1.0.0-rc.8
hideSeconds
hide-seconds
boolean
false
Defines whether a slider for seconds will be available. By default there are sliders for hours, minutes and seconds.
maxValue
max-value
string
"23:59:59"
Defines a formatted maximal time that the user will be able to adjust.
minutesStep
minutes-step
Integer
1
Defines the selection step for the minutes
since v1.0.0-rc.8
readonly
boolean
false
Determines whether the ui5-duration-picker is displayed as readonly.
secondsStep
seconds-step
Integer
1
Defines the selection step for the seconds
since v1.0.0-rc.8
value
string
"00:00:00"
Defines a formatted time value.
valueState
value-state
string
"None"
Visualizes the validation state of the Web Component, for example Error, Warning and Success.
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
valueStateMessage
HTMLElement
Defines the value state message that will be displayed as pop up under the ui5-duration-picker.

Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed, when the ui5-duration-picker is in Information, Warning or Error value state.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the input operation has finished by pressing Enter or on focusout.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel