Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTwo segmented time fields for a start and an end with the length shown, a minimum and maximum duration and optional overnight ranges.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a meeting slot, a shift or opening hours: two times that belong together and must be in order. allowOvernight lets 22:00 to 06:00 be one night shift.
For several ranges in a week use business-hours-editor.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | { start: string; end: string } | null | - | Controlled range of HH:mm times. |
| defaultValue | { start: string; end: string } | null | null | Initial range. |
| onValueChange | (value: TimeRange | null) => void | - | A complete valid range, else null. |
| allowOvernight | boolean | false | Let the end be earlier than the start (next day). |
| minMinutes / maxMinutes | number | - | Shortest and longest length in minutes. |
| min / max | string | - | Limits for both sides. |
| minuteStep / hourCycle / locale | - | - | As on time-field. |
| showDuration | boolean | true | Show "1 hr 30 min" after the fields. |
| Keys | Action |
|---|---|
| 0-9, a / p, Up / Down, Page Up / Page Down | Same as time-field |
| Left / Right | Moves between segments and from the start time into the end time |
group named by label holds the start and end time fields.role="alert" message and marks the segments aria-invalid.allowOvernight.timeRangeMinutes(range, overnight) gives the length in minutes.