Skip to main content

TimePicker

<ui5-time-picker> | Since 1.0.0-rc.6

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​

value​

DescriptionDefines a formatted time value.
Typestring
Default""

name​

DescriptionDetermines 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.
Typestring | undefined
Defaultundefined
Since2.0.0

valueState​

DescriptionDefines the value state of the component.
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"

disabled​

DescriptionDefines the disabled state of the comonent.
Typeboolean
Defaultfalse

readonly​

DescriptionDefines the readonly state of the comonent.
Typeboolean
Defaultfalse

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 | undefined
Defaultundefined

open​

DescriptionDefines the open or closed state of the popover.
Typeboolean
Defaultfalse
Since2.0.0

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse
Since2.1.0

accessibleName​

DescriptionDefines the aria-label attribute for the component.
Typestring | undefined
Defaultundefined
Since2.1.0

accessibleNameRef​

DescriptionReceives id (or many ids) of the elements that label the component.
Typestring | undefined
Defaultundefined
Since2.1.0

dateValue​

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

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, Critical or Negative 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<TimePickerChangeEventDetail>
Parametersvalue: string
The submitted value.
valid: boolean
Indicator if the value is in correct format pattern and in valid range.
BubblesYes
CancelableNo

input​

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

open​

DescriptionFired after the value-help dialog of the component is opened.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

close​

DescriptionFired after the value-help dialog of the component is closed.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

Methods​

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.

Timezones​

You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc.