DateRangePicker
Trigger button with a two-month calendar popover for selecting a date range. Built on date-fns with hover preview, min/max constraints, and a standalone RangeCalendar for embedding directly in layouts.
Examples
Controlled
No range selected.
Min / max
Available within the next 60 days.
Sizes
RangeCalendar standalone
April 2026May 2026
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Select start date
DateRangePicker props
value
DateRange
Controlled selected range.
defaultValue
DateRange
Initial range for uncontrolled usage.
onValueChange
(range: DateRange | undefined) => void
Called when the range changes.
dateFormat= 'dd/MM/yyyy'
string
date-fns format string for the trigger display.
placeholder
string
Trigger placeholder. Defaults to 'Select date range…'.
min
Date
Earliest selectable date.
max
Date
Latest selectable date.
size= 'md'
'sm' | 'md' | 'lg' | 'xl'
Trigger height and text size.
label
string
Label above the trigger.
hint
string
Helper text below.
error= false
boolean
Error border and hint colour.
disabled= false
boolean
Disables the trigger.
className
string
Additional classes on the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | DateRange | — | Controlled selected range. |
| defaultValue | DateRange | — | Initial range for uncontrolled usage. |
| onValueChange | (range: DateRange | undefined) => void | — | Called when the range changes. |
| dateFormat | string | 'dd/MM/yyyy' | date-fns format string for the trigger display. |
| placeholder | string | — | Trigger placeholder. Defaults to 'Select date range…'. |
| min | Date | — | Earliest selectable date. |
| max | Date | — | Latest selectable date. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Trigger height and text size. |
| label | string | — | Label above the trigger. |
| hint | string | — | Helper text below. |
| error | boolean | false | Error border and hint colour. |
| disabled | boolean | false | Disables the trigger. |
| className | string | — | Additional classes on the wrapper. |
RangeCalendar props
value
DateRange
Controlled range.
onValueChange
(range: DateRange | undefined) => void
Called when range changes.
min
Date
Earliest selectable date.
max
Date
Latest selectable date.
disabled
(date: Date) => boolean
Disable individual dates.
className
string
Additional classes on the calendar wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | DateRange | — | Controlled range. |
| onValueChange | (range: DateRange | undefined) => void | — | Called when range changes. |
| min | Date | — | Earliest selectable date. |
| max | Date | — | Latest selectable date. |
| disabled | (date: Date) => boolean | — | Disable individual dates. |
| className | string | — | Additional classes on the calendar wrapper. |