TimePicker

import { TimePicker } from '@enmovil/ui-design-system';

Lets the user pick a time of day. defaultTime sets the initial time in HH:mm:ss format, and onChange reports the selected time.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Meant as an extra CSS class, but it replaces the component's own enmv-time-picker class, which drops the design-system styling.
defaultTime	string	Yes	—	—	Time selected when the picker first renders, as an HH:mm:ss string such as 10:10:10. Later changes are ignored.
status	string	No	—	'', 'error', 'warning'	Validation state of the input. error or warning outlines it in that colour; the story's active, success, normal and exception options are not supported values.
disabled	boolean	No	—	—	Disables the picker so no time can be picked. Off by default.

Other attributes

TimePicker passes 370 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onChange	((time: Dayjs | null, timeString: string | string[]) => void)	Fires when a time is picked or cleared.
onFocus	PickerFocusEventHandler	Fires when the input receives focus.
onBlur	PickerFocusEventHandler	Fires when the input loses focus.
onOpenChange	((open: boolean) => void)	Fires when the time panel opens or closes.

Children

TimePicker does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open TimePicker in Storybook to try every story with the full set of controls.