Date range picker
v1.0.0 | View in Storybook Select a date range such as 10/06/2025 – 12/06/2025. Part of the Date and time picker family; display and parsing respect the user’s locale.When to use
- Filtering data or reports by a date window.
- Scheduling or booking flows where only dates matter (no time component).
- When comparing activity across a defined period.
When to use something else
- Single date only: use the date picker via Date and time picker.
- When time boundaries matter within each day, use Date time range picker.
- For relative shortcuts (“Last 7 days”), consider presets alongside the picker.
Behavior
- Enforce valid start/end ordering; show validation when the range is incomplete or inverted.
- Opening the control reveals a date picker calendar UI anchored to the field.
Often used with
- Label, Helper text, Data grid filters.