Time picker

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

Examples#

Base#

Label

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

Value option#

Time

Web Component
HTML Blueprint

<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.

<chi-time></chi-time>

Active#

Web Component
HTML Blueprint

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

Seconds#

Web Component
HTML Blueprint

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

24-hour format#

Web Component
HTML Blueprint

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

Step#

Web Component
HTML Blueprint

<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