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="example__base">Label</chi-label>
<chi-time-picker id="example__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="example__disabled">Label</chi-label>
<chi-time-picker id="example__disabled" disabled></chi-time-picker>

Value option

Label

Web Component
HTML Blueprint

<chi-label for="example__value-option">Label</chi-label>
<chi-time-picker id="example__value-option" value="09:00"></chi-time-picker>

Seconds

Label

Web Component
HTML Blueprint

<chi-label for="example__seconds">Label</chi-label>
<chi-time-picker id="example__seconds" display-seconds></chi-time-picker>

24-hour format

Label

Web Component
HTML Blueprint

<chi-label for="example__24hour-format">Label</chi-label>
<chi-time-picker id="example__24hour-format" format="24hr"></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

Minutes and seconds can be shown in steps of 5, 10, 15, 20, or 30 minutes or seconds. Use the property minutes-step to define the step for the minutes (defaults to 15 min) and the property seconds-step to define the step for the minutes (defaults to 10 seconds).

Web Component
HTML Blueprint

<chi-time minutes-step="20" seconds-step="30" 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'`
`minutesStep`	`minutes-step`	Renders minutes in stepped format. Defaults to 15 min steps if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`15`
`secondsStep`	`seconds-step`	Renders seconds in stepped format. Defaults to 10 seconds if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`15`
`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'`
`minutesStep`	`minutes-step`	Renders minutes in stepped format. Defaults to 15 min steps if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`15`
`secondsStep`	`seconds-step`	Renders seconds in stepped format. Defaults to 10 seconds if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`15`
`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