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
<calcite-time-picker></calcite-time-picker>
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 |
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> |