DateRangePicker
Dual-calendar date range selector with preset ranges, min/max constraints, locale formatting, and keyboard navigation
DateRangePicker Component
Range selection for booking, analytics filters, and reporting windows.
Basic Usage
Pick a simple start and end range with default behavior.
Selected range: 4/3/2026 -> 4/6/2026
Implementation Notes
Start with a controlled value so external forms can read and write the selected range.
- - Keep the component controlled with `value` and `onChange`.
- - Show the chosen range near the picker for quick validation.
- - Use defaults before enabling optional configuration.
Normal Usage
Add form-friendly display options for everyday scheduling screens.
Travel Window
Current travel range: 4/5/2026 -> 4/9/2026
Implementation Notes
This setup is ideal for booking forms where users confirm their range before submitting.
- - `showFooter` helps prevent accidental range changes.
- - `showClear` gives users a fast reset path.
- - A custom separator can align with product language.
Advanced Usage
Synchronize range updates and enable shortcut-driven selections.
Waiting for changes...
Implementation Notes
Advanced screens often sync range updates into charts, exports, or query parameters.
- - Use `onRangeChange` when you only need start and end dates.
- - Shortcuts speed up common analytics filters.
- - Set `startWeekOn` to align with regional expectations.
Real-Life Use Cases
Common in reporting dashboards where users compare windows over time.
Reporting Period
Window: 3/20/2026 -> 4/2/2026
Duration: 13 days
Quarter-over-quarter snapshot
Implementation Notes
Production reporting usually enforces boundaries to avoid invalid or expensive queries.
- - Constrain ranges with `minDate` and `maxDate`.
- - Echo selected windows so users trust exported data.
- - Pair range changes with chart and table refresh logic.
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface