The component is built using the
MultiInputDateRangeField for the keyboard editing and the
DateRangeCalendar for the view editing.
All the documented props of those two components can also be passed to the Date Range Picker component.
Check-out their documentation page for more information:
The value of the component can be uncontrolled or controlled.
The component is available in four variants:
DesktopDateRangePickercomponent which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.
MobileDateRangePickercomponent which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.
DateRangePickercomponent which renders
MobileDateRangePickerdepending on the device it runs on.
StaticDateRangePickercomponent which renders without the popover/modal and field.
By default, the
DateRangePicker component renders the desktop version if the media query
@media (pointer: fine) matches.
This can be customized with the
The component can be disabled or read-only.
Render 1 to 3 months
You can render up to 3 months at the same time using the
Use a single input field
You can pass the
SingleInputDateRangeField component to the Date Range Picker to use it for keyboard editing:
To simplify range selection, you can add shortcuts.
- This Week
- Last Week
- Last 7 Days
- Current Month
- Next Month
You can find the documentation in the Validation page
🚧 Month Range Picker
The Month Range Picker allows setting a range of months.
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.