Time picker
A segmented hh:mm (AM/PM) time field with typed and arrow-stepped spinbuttons, a slot list part (inline or in a popover) with busy times and a now marker, 12/24-hour and time-zone label, plus a start–end range with computed length.
Preview
Sync with designShares its slots with the list beside it.
1030
LisbonType digits or use arrow keys.Pickup (12-hour)
0545PM
ESTType digits or use arrow keys.Focus block
1300
Type digits or use arrow keys.1430
Type digits or use arrow keys.Lasts 1 h 30 min
ReminderPick a time between 8:00 and 19:00.
0710
Type digits or use arrow keys.Thu, Nov 5
10:30- 09:00
- 09:15
- 09:30
- 09:45
- 10:00Busy
- 10:15
- Current time 10:20
- 10:30
- 10:45
- 11:00Busy
- 11:15Busy
- 11:30Busy
- 11:45
- 12:00
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | null | null | Time as "HH:mm" (24-hour). |
| onValueChange | (value: string | null) => void | — | Called with "HH:mm", or null while a segment is empty. |
| hour12 | boolean | false | Show 12-hour hours with an AM/PM segment. |
| minuteStep | number | 1 | Arrow-key step for minutes (Shift steps 10). |
| timeZoneLabel | string | — | Muted label after the time, e.g. "Lisbon". |
| min / max | string | "08:00" / "19:00" | TimePicker: first and last slot. |
| step | number | 15 | TimePicker: minutes between slots. |
| busy | (string | [string, string])[] | [] | TimePicker: busy slots or ranges, shown struck and disabled. |
| now | string | — | TimePicker and TimeSlotList: draws a “Now” marker before the first later slot. |
| invalid / disabled | boolean | false | Danger edge / dimmed field. |
| TimeRangePicker value | { start: string | null; end: string | null } | — | Start and end; shows the computed length or an error. |
| TimeSlotList | { min?, max?, step?, busy?, after?, value?, onSelect?, now?, hour12?, autoFocus? } | — | The slot listbox as its own part, for rendering inline. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.