A time of day, typed or set on a clock face.
Typing is the primary route and the clock is the second one, for the same reason as DatePicker: somebody who knows the time should be able to write it. "0830" and "8:30" both work, and the arrow keys move in five-minute steps.
The dial is one face for both stages. Hours use two rings - the outer for 1-12, the inner for 13-00 - so a 24-hour time needs no AM/PM control, which is the part people get wrong. Minutes snap to five on a tap and go to any minute on a drag, because five-minute precision is what almost every time needs and the exception should not slow the common case down.
zone turns on the line showing the same moment in the other offices. A meeting time is the one field where being an hour out costs somebody their evening.
import { TimePicker } from '@redrob-labs/ui';| Prop | Type | Notes |
|---|---|---|
value |
string |
HH:MM, 24-hour. |
defaultValue |
string |
|
size |
'sm' | 'md' | 'lg' |
|
disabled |
boolean |
|
zone |
string |
The zone this time is in. Turns on the "and what time that is elsewhere" line. |
offices |
Array<[string, string]> | false |
Offices to convert into. false turns the line off; an array replaces Redrob's own. |
presets |
string[] | false |
One-tap times. false turns the row off. |
now |
Date |
The moment offsets are computed for, so DST is right. |
openLabel |
string |
|
closeLabel |
string |
|
dialogLabel |
string |
|
howLabel |
string |
|
hourHint |
React.ReactNode |
|
minuteHint |
React.ReactNode |
|
doneLabel |
React.ReactNode |
|
className |
string |
|
onChange |
(value: string) => void |