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.
Usage
- Choosing a time of day
Sample
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 last element, focus will remain on the last element. |
Arrow right | Moves focus between the component's elements. If the currently focused element is the first element, focus will remain on the first element. |
Arrow top | Increases the value of the focused element. |
Arrow bottom | 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. | "12" | "24" | "user" | "user" |
| messageOverrides | Use this property to override individual strings used by the component. | {
fractionalSecond?: string;
fractionalSecondDown?: string;
fractionalSecondUp?: string;
hour?: string;
hourDown?: string;
hourUp?: string;
meridiem?: string;
meridiemDown?: string;
meridiemUp?: string;
minute?: string;
minuteDown?: string;
minuteUp?: string;
second?: string;
secondDown?: string;
secondUp?: string;
} | ||
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "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 background color of the time picker. |
| --calcite-time-picker-corner-radius | Specifies the border radius of the time picker. |
| --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<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(): Promise<void> |