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
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
value
Description Defines a formatted time value. Type stringDefault ""
name
Description Determines the name by which the component will be identified upon submission in an HTML form.Note: This property is only applicable within the context of an HTML Form element. Type string | undefinedDefault undefined Since 2.0.0
valueState
Description Defines the value state of the component. Type "None" | "Positive" | "Critical" | "Negative" | "Information"Default "None"
disabled
Description Defines the disabled state of the comonent. Type booleanDefault false
readonly
Description Defines the readonly state of the comonent. Type booleanDefault false
placeholder
Description Defines a short hint, intended to aid the user with data entry when the component has 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 component appear empty - without placeholder or format pattern. Type string | undefinedDefault undefined
Description Determines the format, displayed in the input field. Type string | undefinedDefault undefined
open
Description Defines the open or closed state of the popover. Type booleanDefault false Since 2.0.0
required
Description Defines whether the component is required. Type booleanDefault false Since 2.1.0
accessibleName
Description Defines the aria-label attribute for the component. Type string | undefinedDefault undefined Since 2.1.0
accessibleNameRef
Description Receives id (or many ids) of the elements that label the component. Type string | undefinedDefault undefined Since 2.1.0
accessibleDescription
Description Defines the accessible description of the component. Type string | undefinedDefault undefined Since 2.14.0
accessibleDescriptionRef
Description Receives id(or many ids) of the elements that describe the input. Type string | undefinedDefault undefined Since 2.14.0
dateValue
Description Currently selected time represented as JavaScript Date instance Type Date | nullDefault null Readonly true
Slots
valueStateMessage
Description Defines the value state message that will be displayed as pop up under the ui5-time-picker.Note: If not specified, a default text (in the respective language) will be displayed.Note: The valueStateMessage would be displayed, when the ui5-time-picker is in Information, Critical or Negative value state. Type Array<HTMLElement>Since 1.0.0-rc.8
Events
change
Description Fired when the input operation has finished by clicking the "OK" button or when the text in the input field has changed and the focus leaves the input field. Type CustomEvent<TimePickerChangeEventDetail>Parameters value : stringvalid : booleanBubbles Yes Cancelable No
Description Fired when the value of the ui5-time-picker is changed at each key stroke. Type CustomEvent<TimePickerInputEventDetail>Parameters value : stringvalid : booleanBubbles Yes Cancelable No
open
Description Fired after the value-help dialog of the component is opened. Type CustomEventSince 2.0.0 Bubbles Yes Cancelable No
close
Description Fired after the value-help dialog of the component is closed. Type CustomEventSince 2.0.0 Bubbles Yes Cancelable No
Methods
Description Formats a Java Script date object into a string representing a locale date and time according to the formatPattern property of the TimePicker instance Return type stringParameters date : Date
isValid
Description Checks if a value is valid against the current formatPattern value.Note: an empty string is considered as valid value. Return type booleanParameters value : string | undefined
CSS Parts
No CSS parts available for this component.
More Samples
States
TimePicker supports several semantic value states, readonly, disabled, etc.
Timezones
You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc.