Time Picker

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

1
<calcite-time-picker></calcite-time-picker>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus between the component's elements. If the currently focused element is the last element, focus will cycle to the first element.
Tab and ShiftMoves focus between the component's elements. If the currently focused element is the first element, focus will cycle to the last element.
Arrow leftMoves focus between the component's elements. If the currently focused element is the last element, focus will remain on the last element.
Arrow rightMoves focus between the component's elements. If the currently focused element is the first element, focus will remain on the first element.
Arrow topIncreases the value of the focused element.
Arrow bottomDecreases the value of the focused element.
EscWhen contained in a parent component, such as calcite-input-time-picker, closes the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
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"
messageOverridesUse 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; }
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
stepstepSpecifies the granularity the value must adhere to (in seconds).number60
valuevalueThe component's value in UTC (always 24-hour format).string

Events

NameDescriptionBehavior
calciteTimePickerChangeFires when a user changes the component's timebubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.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