Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA segmented date plus time input that reports one local date-time string, with a default time so picking just a day completes the value.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a moment that has both a day and a time and no time zone of its own: a publish time, a deadline, an event start. The value is a local YYYY-MM-DDTHH:mm.
Store the time zone next to it when the moment must be exact across zones.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | null | - | Controlled local date-time, YYYY-MM-DDTHH:mm, or null. |
| defaultValue | string | null | null | Initial value when uncontrolled. |
| onValueChange | (value: string | null) => void | - | Called with a complete date-time, or null. |
| min / max | string | - | Earliest and latest local date-time. |
| defaultTime | string | - | Time used when only the date is entered. |
| granularity | hour | minute | "minute" | Smallest unit of the time half. |
| hourCycle | 12 | 24 | from locale | Force the clock. |
| locale / label / name | string | - | Locale, accessible name and hidden input name. |
| disabled / readOnly / invalid | boolean | false | Field states. |
| Keys | Action |
|---|---|
| 0-9, Up / Down, Page Up / Page Down, Home / End | Same as date-field and time-field |
| Left / Right | Moves between segments inside the date or time half |
| Tab | Moves from the date half to the time half |
group named by label holds two named groups, "... date" and "... time", each made of spinbuttons.min or max marks both halves aria-invalid.defaultTime, the value stays null until both halves are complete.date-field and time-field, so locale and RTL behave the same.