Input Time Picker | Calcite Design System

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.

Sample

Usage

Choosing a time of day

Accessibility

For more detailed keyboard navigation, visit the Time Picker's keyboard navigation.

Key	Function
`Tab`	Moves focus to the component's next element. If the currently focused element is the last element, the focus will leave the component.
`Tab` and `Shift`	Move focus to the component's previous element. If the currently focused element is the first element, the focus will leave the component.
`Arrow up`	Increases the value of the focused element.
`Arrow down`	Decreases the value of the focused 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.
`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`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
focusTrapDisabled	focus-trap-disabled	When `true`, prevents focus trapping.	`boolean`	`false`
form	form	Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.	`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.	`HourFormat`	`"user"`
label	label	Specifies an accessible label for the component.	`string`
labelText	label-text	Specifies the component's label text.	`string`
max	max	When the component resides in a form, specifies the maximum `value`.	`string`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
min	min	When the component resides in a form, specifies the minimum `value`.	`string`
name	name	Specifies the name of the component. Required to pass the component's `value` on form submission.	`string`
numberingSystem	numbering-system	Specifies the Unicode numeral system used by the component for localization.	`NumberingSystem`
open	open	When `true`, displays the `calcite-time-picker` component.	`boolean`	`false`
overlayPositioning	overlay-positioning	Specifies the type of positioning to use for overlaid content, where: `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.	`OverlayPositioning`	`"absolute"`
placement	placement	Determines the `calcite-time-picker`'s position relative to the input.	`LogicalPlacement`	`"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.	`Scale`	`"m"`
status	status	Specifies the input field's status, which determines message and icons.	`Status`	`"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.	`IconName \| boolean`
validationMessage	validation-message	Specifies the validation message to display under the component.	`string`
validityread-only		The component's current validation state.	`ValidityState`
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.
--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.	bubblescomposed
calciteInputTimePickerBeforeOpen	Fires when the component is added to the DOM but not rendered, and before the opening transition begins.	bubblescomposed
calciteInputTimePickerChange	Fires when the component's `value` is modified by the user.	bubblescomposedcancelable
calciteInputTimePickerClose	Fires when the component is closed and animation is complete.	bubblescomposed
calciteInputTimePickerOpen	Fires when the component is opened and animation is complete.	bubblescomposed

Methods

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