TimePicker
The ui5-time-picker
component provides an input field with assigned clocks which are opened on user action.
The ui5-time-picker
allows users to select a localized time using touch, mouse, or keyboard input.
It consists of two parts: the time input field and the clocks.
Usage​
The user can enter a time by:
- Using the clocks that are displayed in a popup
- Typing it in directly in the input field
When the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).
When the user directly triggers the clocks display, the actual time is displayed.
For the ui5-time-picker
Formatting​
If 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 UTS #35: Unicode Locale Data Markup Language.
For example, if the format-pattern
is "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.
When closed:
- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
- [Shift]+[Page Up] - Increments minutes by 1.
- [Shift]+[Page Down] - Decrements minutes by 1.
- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.
- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.
When opened:
- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
- [Shift]+[Page Up] - Increments minutes by 1.
- [Shift]+[Page Down] - Decrements minutes by 1.
- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.
- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.
- [A] or [P] - Selects AM or PM respectively.
- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).
- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.
ES6 Module Import​
import "@ui5/webcomponents/dist/TimePicker.js";
Basic Sample​
Properties​
placeholder​
formatPattern​
dateValue​
value​
valueState​
disabled​
readonly​
Slots​
valueStateMessage​
Events​
change​
input​
Methods​
openPicker​
closePicker​
isOpen​
formatValue​
isValid​
CSS Parts​
No CSS parts available for this component.
More Samples​
Format Patterns​
States​
TimePicker supports several semantic value states, readonly, disabled, etc.