TimePicker

v1.0.0-rc.6
@ui5/webcomponents
<ui5-time-picker>

Basic TimePicker

<ui5-time-picker id="timepicker1"></ui5-time-picker>
	

TimePicker in twelve hours format

<ui5-time-picker id="timepicker1" format-pattern="hh:mm:ss a"></ui5-time-picker>
	

TimePicker with only minutes and seconds

<ui5-time-picker id="timepicker2" format-pattern="mm:ss"></ui5-time-picker>
	

TimePicker with value-state and valueStateMessage

Please provide valid value
<ui5-time-picker id="timepicker3" format-pattern="mm:ss" value-state="Error">
	<div slot="valueStateMessage">Please provide valid value</div>
</ui5-time-picker>
	

Overview

The ui5-time-picker component provides an input field with assigned sliders which opens 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 sliders.

Usage

The 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 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:
  • [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.
When opened:
  • [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

import @ui5/webcomponents/dist/TimePicker.js";

Properties/Attributes

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.

Name
Type
Default Value
Description
dateValue (readonly)
date-value
Date
Currently selected date represented as JavaScript Date instance
disabled
boolean
false
Determines whether the ui5-time-picker is displayed as disabled.
formatPattern
format-pattern
string
""
Determines 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)
placeholder
string
undefined
Defines a short hint, intended to aid the user with data entry when the ui5-time-picker 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 ui5-time-picker appear empty - without placeholder or format pattern.
readonly
boolean
false
Determines whether the ui5-time-picker is displayed as readonly.
value
string
undefined
Defines a formatted time value.
valueState
value-state
ValueState
"None"
Defines the value state of the ui5-time-picker.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

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 default slot.

Slot
Type
Description
valueStateMessage
HTMLElement
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, Warning or Error value state.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
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.
input
Fired when the value of the ui5-time-picker is changed at each key stroke.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
closePicker
Closes the picker
formatValue
Formats a Java Script date object into a string representing a locale date and time according to the formatPattern property of the TimePicker instance
oDate
type: object
description: A Java Script date object to be formatted as string
isOpen
Checks if a value is valid against the current date format of the TimePicker
value
type: string
description: A value to be tested against the current date format
isValid
Checks if a value is valid against the current format patternt of the TimePicker.

Note: an empty string is considered as valid value.
value
type: string
description: The value to be tested against the current date format
openPicker
Opens the picker. { focusInput: true } By default, the focus goes in the picker after opening it. Specify this option to focus the input field.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel