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

2 samples
1
<calcite-input-time-picker></calcite-input-time-picker>
v3.0.2

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 true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
focusTrapDisabledfocus-trap-disabledWhen true, 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"
maxmaxWhen the component resides in a form, specifies the maximum value.string
messageOverridesUse this property to override individual strings used by the component.{ chooseTime?: string; } & { 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; }
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 true, 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 true, the component's value can be read, but controls are not accessible and the value cannot be modified.booleanfalse
requiredrequiredWhen true 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

Styles

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 changes.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(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close