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.	`"12hr" \| "24hr"`	`'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>	time:string

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	`"12hr" \| "24hr"`	`'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