Time picker

Time picker allows users to enter a time through text input or choose a time from a picker.

Examples

Base

Label
<chi-label for="time-picker-base">Label</chi-label>
<chi-time-picker id="time-picker-base"></chi-time-picker>

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus. Note: The required attribute can not be used on inputs with a disabled attribute specified.

Label
<chi-label for="time-picker-disabled">Label</chi-label>
<chi-time-picker id="time-picker-disabled" disabled></chi-time-picker>

Value option

Time
<chi-label for="unique-id-va1">Time</chi-label>
<chi-time-picker id="unique-id-va1" value="09:00"></chi-time-picker>

Time

An example of a time picker not attached to any element.

Base

<chi-time></chi-time>

Active

<chi-time value="14:00"></chi-time>

Seconds

<chi-time display-seconds></chi-time>

24-hour format

<chi-time format='24hr'></chi-time>

Step

<chi-time stepped display-seconds></chi-time>

chi-time-picker

Properties

Property
Attribute
Description
Type
Default
active
active
Indicates whether the time picker popover is open or closed
boolean
false
disabled
disabled
To disable chi-time-picker.
boolean
false
displaySeconds
display-seconds
Displaying seconds column
boolean
false
format
format
To define format of Time Picker.
string
'12hr'
value
value
Selected time of Time Picker
string
undefined

Methods

Method
Description
Returns
Parameters
getTime() => Promise<string>
Gets time

Type: Promise<string>

-
setTime(time: string) => Promise<void>
Sets time

Type: Promise<void>

-

chi-time

Properties

Property
Attribute
Description
Type
Default
displaySeconds
display-seconds
Displaying seconds column
boolean
false
format
format
To render Time Picker in 24 hours format
string
'12hr'
stepped
stepped
To render Minutes and Seconds columns in stepped format
boolean
undefined
value
value
Selected time in the time picker
string
undefined

Events

Event
Description
Type
chiTimeChange
Time change value event
CustomEvent<any>

Accessibility

Accessibility guidelines coming soon