DateRangePicker

A dual-calendar picker for selecting a contiguous date range.

Category: inputs · WCAG 2.2-AA · date, range, calendar, picker, input, form

Sizes

Prop	Type	Default	Description
`value`	`{ start: Date; end: Date } \| null`	—	Controlled selected range
`defaultValue`	`{ start: Date; end: Date }`	—	Uncontrolled initial range
`onValueChange`	`(range: { start: Date; end: Date }) => void`	—	Called when a complete range is selected
`min`	`Date`	—	Earliest selectable date
`max`	`Date`	—	Latest selectable date
`disabled`	`(date: Date) => boolean`	—	Predicate to disable individual days
`presets`	`{ label: string; range: { start: Date; end: Date } }[]`	—	Quick-select preset ranges shown in a side column
`locale`	`string`	—	BCP-47 locale; defaults to the current i18n locale
`placeholder`	`string`	—	Empty-state trigger text
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Field/grid size
`labels`	`DateRangePickerLabels`	—	i18n label overrides

Selecting a contiguous start–end date range (reporting windows, bookings, filters)
When two months visible at once and hover-preview of the in-between span aid selection

Picking a single date — use DatePicker or Calendar
Selecting many non-contiguous dates — a range picker only models one continuous span

Uncontrolled dual-calendar range picker

<DateRangePicker />

Quick-select common ranges

<DateRangePicker presets={[{ label: "Last 7 days", range: last7 }]} />

Limits the selectable dates

<DateRangePicker min={new Date(Date.UTC(2024, 0, 1))} max={new Date(Date.UTC(2024, 11, 31))} />