Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn inline date range picker panel: preset rail, typed start and end fields and a two-month calendar, kept in sync, with an optional Apply step.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it as the content of a popover or as an inline panel on a reporting page, where a person chooses a period by preset, by typing or by clicking two days.
Put it in a popover for a compact filter bar (see the date-range-filter-popover pattern).
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | { from: string; to: string } | null | null | Controlled or initial range. |
| onValueChange | (value: DateRange | null) => void | - | Every change, or only Apply with confirm. |
| presets | PresetItem[] | false | 7 common | Preset rail; false hides it. |
| showFields | boolean | true | Typed start and end fields. |
| confirm | boolean | false | Hold changes in a draft until Apply. |
| numberOfMonths | 1 | 2 | 2 | Months shown side by side. |
| calendar | CalendarSystem | gregory | Persian, Hijri, Hebrew and more. |
| min / max / minDays / maxDays / isDateUnavailable | - | - | Limits, forwarded to the fields and the calendar. |
| firstDay / today / locale | - | - | Week start, reference day and locale. |
| Keys | Action |
|---|---|
| Tab | Presets, then start and end fields, then the calendar, then Cancel and Apply |
| Arrow keys, Page Up / Page Down, Home / End | Move inside the calendar and the presets (see calendar-grid, range-presets) |
| Escape | Cancels a half-chosen range in the calendar |
group named by label holding three named parts: a radiogroup of presets, a field group and a calendar grid per month.confirm the summary is a polite live region, so the chosen dates are read before Apply.