TimePicker Composition
The DatePicker's sibling. Typing accepts what people actually type; the list is a convenience on top of that, never the only way to answer.
Usage
Type 9, 0930, 9:30 or 9pm — or pick one.
Selected: 09:30
<Field label="Start time" hint="Type 9, 0930, 9:30 or 9pm — or pick one."> <TimePicker value={time} onValueChange={setTime} step={30} /></Field>What the parsing accepts
9, 9:30, 09.30, 0930, 9pm, 21:05. A 12-hour suffix shifts the hour, 12am becomes
00:00, and anything that would not be a real time — 25:00, 9:75 — returns null rather than
being rounded into something plausible.
Do
Set step to the granularity your product actually books in; typing is never restricted to it.
Don't
Use it for a duration — '90 minutes' is not a time of day, and the picker will read as one.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| value / defaultValue | TimeValue | null | — | { hours, minutes } in 24-hour form. null is an empty field. |
| onValueChange | (value: TimeValue | null) => void | — | Fires on blur and on picking from the list. |
| min / max | TimeValue | — | Inclusive bounds. They also bound the offered list. |
| step | number | 30 | Minutes between offered times. |
| size / disabled / invalid | — | — | As every other control. |
Opening
Clicking the field opens the list, and so does the clock button — the button is a second way in, not the only one. Typing is unaffected either way.