Skip to main content

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​

DescriptionDefines 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.
Typestring | undefined
Defaultundefined

formatPattern​

DescriptionDetermines the format, displayed in the input field.
Example: HH:mm:ss -> 11:42:35 hh:mm:ss a -> 2:23:15 PM mm:ss -> 12:04 (only minutes and seconds)
Typestring
Default""

dateValue​

DescriptionCurrently selected time represented as JavaScript Date instance
TypeDate | Array<Date> | null
Defaultnull
Readonlytrue

value​

DescriptionDefines a formatted time value.
Typestring | undefined
Defaultundefined

valueState​

DescriptionDefines the value state of the ui5-time-picker.
Type"None" | "Success" | "Warning" | "Error" | "Information"
Default"None"

disabled​

DescriptionDetermines whether the ui5-time-picker is displayed as disabled.
Typeboolean
Defaultfalse

readonly​

DescriptionDetermines whether the ui5-time-picker is displayed as readonly.
Typeboolean
Defaultfalse

Slots​

valueStateMessage​

DescriptionDefines 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, Warning or Error value state.
TypeArray<HTMLElement>
Since1.0.0-rc.8

Events​

change​

DescriptionFired 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.
TypeCustomEvent<TimePickerBaseChangeEventDetail>
Parametersvalue: string
The submitted value.
valid: boolean
Indicator if the value is in correct format pattern and in valid range.

input​

DescriptionFired when the value of the ui5-time-picker is changed at each key stroke.
TypeCustomEvent<TimePickerBaseInputEventDetail>
Parametersvalue: string
The current value.
valid: boolean
Indicator if the value is in correct format pattern and in valid range.

Methods​

openPicker​

DescriptionOpens the picker.
Return typePromise<void>

closePicker​

DescriptionCloses the picker
Return typePromise<void>

isOpen​

DescriptionChecks if the picker is open
Return typeboolean

formatValue​

DescriptionFormats a Java Script date object into a string representing a locale date and time according to the formatPattern property of the TimePicker instance
Return typestring
Parametersdate: Date
A Java Script date object to be formatted as string

isValid​

DescriptionChecks if a value is valid against the current formatPattern value.
Note: an empty string is considered as valid value.
Return typeboolean
Parametersvalue: string | undefined
The value to be tested against the current date format

CSS Parts​

No CSS parts available for this component.

More Samples​

Format Patterns​

States​

TimePicker supports several semantic value states, readonly, disabled, etc.