Date Range Picker
Select start and end dates with an interactive calendar popup
The date range picker is a trigger button that opens a calendar popover for selecting a start and end date with a live hover preview. Use it for report ranges, booking windows, and date filters.
To select a single date, use DatePicker instead.
Preview
Installation
Usage
Examples
Multiple Months
Set numberOfMonths to show several months side by side for easier range selection.
With Custom Format
Pass format to change how the selected range is displayed.
With Placeholder
Set placeholder for the empty-state text on the trigger.
Disabled State
Set disabled to prevent opening the picker.
Accessibility
The trigger opens a calendar popover that traps focus while open. Inside the calendar, use the arrow keys to move between days, PageUp and PageDown to change months, and Enter or Space to set the start then the end of the range. Press Escape to close.
API Reference
The DateRangePicker composes Calendar in range mode inside a Popover, with a Button trigger. It exposes its own props rather than forwarding to the underlying parts.
Props
DateRangePicker
Trigger button that opens a range-selection calendar popover with hover preview.