Skip to content

Input Time Picker

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.

KeyFunction
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
Arrow downOpens and shifts focus to the calcite-time-picker component.
EscWhen the calcite-time-picker component is open, closes the component and shifts focus back to the calcite-input-time-picker.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen present, interaction is prevented and the component is displayed with lower opacity.booleanfalse
focusTrapDisabledfocus-trap-disabledWhen present, prevents focus trapping.booleanfalse
formformThe 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
hourFormathour-formatSpecifies 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"
labellabelAccessible name for the component.string
labelTextlabel-textWhen provided, displays label text on the component.string
maxmaxWhen the component resides in a form, specifies the maximum value.string
messageOverridesUse this property to override individual strings used by the component.Record<string, unknown>
minminWhen the component resides in a form, specifies the minimum value.string
namenameSpecifies the name of the component on form submission.string
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
openopenWhen present, displays the calcite-time-picker component.booleanfalse
overlayPositioningoverlay-positioningDetermines 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"
placementplacementDetermines 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"
readOnlyread-onlyWhen present, the component's value can be read, but controls are not accessible and the value cannot be modified.booleanfalse
requiredrequiredWhen present and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
stepstepSpecifies the granularity the component's value must adhere to (in seconds).number60
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe 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; }
valuevalueThe time value in ISO (24-hour) format.string

Slots

NameDescription
label-contentA slot for rendering content next to the component's labelText.

Styles

NameDescription
--calcite-input-time-picker-background-colorSpecifies the component's background color.
--calcite-input-time-picker-border-colorSpecifies the component's border color.
--calcite-input-time-picker-icon-colorSpecifies the component's icon color.
--calcite-input-time-picker-icon-color-hoverSpecifies the component's icon color when hovered.
--calcite-input-time-picker-shadowSpecifies the component's shadow.
--calcite-input-time-picker-corner-radiusSpecifies the component's border radius.
--calcite-input-time-picker-input-background-colorSpecifies the component's input background color.
--calcite-input-time-picker-input-text-colorSpecifies the component's input text color.
--calcite-input-time-picker-input-shadowSpecifies the component's input shadow.
--calcite-input-time-picker-input-corner-radiusSpecifies the component's input border radius.
--calcite-input-time-picker-input-border-colorSpecifies the component's input border color.
--calcite-input-time-picker-digit-text-colorSpecifies the component's digit text color.
--calcite-input-time-picker-digit-icon-colorSpecifies the component's digit icon color.
--calcite-input-time-picker-digit-border-color-pressSpecifies the component's digit border color when pressed.
--calcite-input-time-picker-digit-border-color-hoverSpecifies the component's digit border color when hovered.
--calcite-input-time-picker-action-background-color-hoverSpecifies the background color of the component's actions when hovered or focused.
--calcite-input-time-picker-action-background-color-pressSpecifies the background color of the component's actions when active.

Events

NameDescriptionBehavior
calciteInputTimePickerBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteInputTimePickerBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteInputTimePickerChangeFires when the component's value is modified by the user.bubblescomposedcancelable
calciteInputTimePickerCloseFires when the component is closed and animation is complete.bubblescomposed
calciteInputTimePickerOpenFires when the component is open and animation is complete.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
repositionUpdates the position of the component.reposition(delayed?: boolean): Promise<void>
setFocusSets focus on the component.setFocus(options?: FocusOptions): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.