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
Keyboard navigation
| 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 |
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 | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |