Time Picker | Calcite Design System | Esri Developer

Time Picker is a time-based component used for choosing a time of the day.

Overview

Time Picker can be used to pick a time of day that will autofill an input. Time Picker is designed to work within a dropdown or statically within the interface.

Sample

Usage

Choosing a time of day

Accessibility

Key	Function
`Tab`	Moves focus between the component's elements. If the currently focused element is the last element, focus will cycle to the first element.
`Tab` and `Shift`	Moves focus between the component's elements. If the currently focused element is the first element, focus will cycle to the last element.
`Arrow left`	Moves focus between the component's elements. If the currently focused element is the leftmost element, focus will remain on the element.
`Arrow right`	Moves focus between the component's elements. If the currently focused element is the rightmost element, focus will remain on the element.
`Arrow up`	Increases the value of the focused element.
`Arrow down`	Decreases the value of the focused element.
`Esc`	When contained in a parent component, such as `calcite-input-time-picker`, closes the component.

API reference

Properties

Property	Attribute	Description	Type	Default
hourFormat	hour-format	Specifies the component's hour format, where: `"user"` displays the user's locale format, `"12"` displays a 12-hour format, and `"24"` displays a 24-hour format.	`HourFormat`	`"user"`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
numberingSystem	numbering-system	Specifies the Unicode numeral system used by the component for localization.	`NumberingSystem`
scale	scale	Specifies the component's size.	`Scale`	`"m"`
step	step	Specifies the granularity the `value` must adhere to (in seconds).	`number`	`60`
value	value	The component's value in UTC (always 24-hour format).	`string`

Events

Name	Description	Behavior
calciteTimePickerChange	Fires when a user changes the component's time	bubblescomposed

Styles

Name	Description
--calcite-time-picker-background-color	Specifies the component's background color.
--calcite-time-picker-border-color	Specifies the component's border color.
--calcite-time-picker-corner-radius	Specifies the component's border radius.
--calcite-time-picker-button-background-color-hover	Specifies the button's background color when hovered or focused.
--calcite-time-picker-button-background-color-press	Specifies the button's background color when active.
--calcite-time-picker-color	Specifies the component's text color.
--calcite-time-picker-icon-color	Specifies the component's icon color.
--calcite-time-picker-input-border-color-press	Specifies the input's border color when active.
--calcite-time-picker-input-border-color-hover	Specifies the input's border color when hovered.

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component's first focusable element.	`setFocus(options?: FocusOptions): Promise<void>`