Input Time Picker contains a time-based component within an input used for choosing a time of the day.
Overview
Input Time Picker is an input-driven component containing the Time Picker.
Usage
- Choosing a time of day
Sample
Accessibility
Keyboard navigation
For more detailed keyboard navigation, visit the Time Picker's keyboard navigation.
| Key | Function |
|---|---|
Tab | Moves focus in and out of the component. |
Tab and Shift | Moves focus in and out of the component. |
Arrow down | Opens and shifts focus to the calcite-time-picker component. |
Esc | When the calcite-time-picker component is open, closes the component and shifts focus back to the calcite-input-time-picker. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | false |
| form | form | The id of the form that will be associated with the component.
When not set, the component will be associated with its ancestor form element, if any. | string | |
| 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" |
| label | label | Accessible name for the component. | string | |
| labelText | label-text | When provided, displays label text on the component. | string | |
| max | max | When the component resides in a form, specifies the maximum value. | string | |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| min | min | When the component resides in a form, specifies the minimum value. | string | |
| name | name | Specifies the name of the component on form submission. | string | |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
| open | open | When true, displays the calcite-time-picker component. | boolean | false |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content.
Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
"fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | "absolute" |
| placement | placement | Determines where the popover will be positioned relative to the input. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | "auto" |
| readOnly | read-only | When true, the component's value can be read, but controls are not accessible and the value cannot be modified. | boolean | false |
| required | required | When true and the component resides in a form,
the component must have a value in order for the form to submit. | boolean | false |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | "idle" |
| step | step | Specifies the granularity the component's value must adhere to (in seconds). | number | 60 |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
| validity | The current validation state of the component. | {
valid: boolean;
badInput: boolean;
customError: boolean;
patternMismatch: boolean;
rangeOverflow: boolean;
rangeUnderflow: boolean;
stepMismatch: boolean;
tooLong: boolean;
tooShort: boolean;
typeMismatch: boolean;
valueMissing: boolean;
} | ||
| value | value | The time value in ISO (24-hour) format. | string |
Slots
| Name | Description |
|---|---|
| label-content | A slot for rendering content next to the component's labelText. |
Styles
| Name | Description |
|---|---|
| --calcite-input-time-picker-background-color | Specifies the component's background color. |
| --calcite-input-time-picker-border-color | Specifies the component's border color. |
| --calcite-input-time-picker-icon-color | Specifies the component's icon color. |
| --calcite-input-time-picker-icon-color-hover | Specifies the component's icon color when hovered. |
| --calcite-input-time-picker-shadow | Specifies the component's shadow. |
| --calcite-input-time-picker-corner-radius | Specifies the component's border radius. |
| --calcite-input-time-picker-input-background-color | Specifies the component's input background color. |
| --calcite-input-time-picker-input-text-color | Specifies the component's input text color. |
| --calcite-input-time-picker-input-shadow | Specifies the component's input shadow. |
| --calcite-input-time-picker-input-corner-radius | Specifies the component's input border radius. |
| --calcite-input-time-picker-input-border-color | Specifies the component's input border color. |
| --calcite-input-time-picker-digit-text-color | Specifies the component's digit text color. |
| --calcite-input-time-picker-digit-icon-color | Specifies the component's digit icon color. |
| --calcite-input-time-picker-digit-border-color-press | Specifies the component's digit border color when pressed. |
| --calcite-input-time-picker-digit-border-color-hover | Specifies the component's digit border color when hovered. |
| --calcite-input-time-picker-action-background-color-hover | Specifies the background color of the component's actions when hovered or focused. |
| --calcite-input-time-picker-action-background-color-press | Specifies the background color of the component's actions when active. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteInputTimePickerBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. | |
| calciteInputTimePickerBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | |
| calciteInputTimePickerChange | Fires when the component's value is modified by the user. | |
| calciteInputTimePickerClose | Fires when the component is closed and animation is complete. | |
| calciteInputTimePickerOpen | Fires when the component is open and animation is complete. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| reposition | Updates the position of the component. | reposition(delayed?: boolean): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |