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

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

Methods

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