Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTwo segmented date fields for a start and an end, joined into one range value with reversed-range and length validation.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
Use it for typing a known start and end: a report period, a stay, a leave request. It is the typed half of a date range picker; combine it with calendar-grid or range-calendar for browsing.
Do not use it when the range is always one of a few presets; use range-presets.
import { DateRangeField } from "@/components/ui/date-range-field"<DateRangeField
label="Stay"
value={stay}
onValueChange={setStay}
minDays={2}
maxDays={14}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| value | { from: string; to: string } | null | - | Controlled range of ISO dates. |
| defaultValue | { from: string; to: string } | null | null | Initial range when uncontrolled. |
| onValueChange | (value: DateRange | null) => void | - | A complete range with from on or before to, else null. |
| min / max | string | - | Earliest and latest allowed date for both ends. |
| minDays / maxDays | number | - | Shortest and longest range in days, both ends counted. |
| isDateUnavailable | (date: string) => boolean | - | Marks single dates as unavailable. |
| startLabel / endLabel / label | string | Start date / End date / Date range | Accessible names. |
| name | string | - | Adds hidden inputs name.from and name.to. |
| locale, disabled, readOnly, invalid | - | - | As on date-field. |
| Keys | Action |
|---|---|
| 0-9, Up / Down, Page Up / Page Down, Home / End | Same as date-field |
| Left / Right | Moves between segments and carries on from the last start segment to the first end segment |
group named by label holds the "Start date" and "End date" fields; each segment is a spinbutton.minDays and maxDays shows a role="alert" message linked with aria-describedby, and marks every segment aria-invalid.date-time-field for that.