TimePicker in twelve hours format
TimePicker with only minutes and seconds
TimePicker with value-state and valueStateMessage
ui5-time-pickercomponent provides an input field with assigned sliders which opens on user action. The
ui5-time-pickerallows users to select a localized time using touch, mouse, or keyboard input. It consists of two parts: the time input field and the sliders.
UsageThe 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
FormattingIf a time is entered by typing it into the input field, it must fit to the used time format.
Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see
For example, if the
format-patternis "HH:mm:ss", a valid value string is "11:42:35" and the same is displayed in the input.
Keyboard handling[F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.
- [PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
- [PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
- [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.
- [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. Exception: AM/ PM List: stay on the first item.
- [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. Exception: AM/ PM List: stay on the last item.
- [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
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.
ui5-time-pickeris displayed as disabled.
ui5-time-pickerhas no value.
Note: When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the
ui5-time-pickerappear empty - without placeholder or format pattern.
ui5-time-pickeris displayed as readonly.
Available options are:
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
Note: If not specified, a default text (in the respective language) will be displayed.
valueStateMessagewould be displayed, when the
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-time-pickeris changed at each key stroke.
This Web Component exposes public methods. You can invoke them directly on the Web Component instance.
formatPatternproperty of the TimePicker instance
description: A Java Script date object to be formatted as string
Note: an empty string is considered as valid value.
description: The value to be tested against the current date format