Time Field

A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add time-field

Preview

Code

Default

––––AM

Readonly

––––AM

Invalid

––––AM

Disabled

––––AM

Change the hour format in the time field by using the hourCycle prop.

Preview

Code

24 hour

Event time

1345

Preview

Code

Event time

1145AM

value: {"hour":11,"minute":45,"second":0,"millisecond":0}

Preview

Code