–
Component composition
The component is built using the MultiInputDateRangeField
for the keyboard editing and the DateRangeCalendar
for the view editing.
Check-out their documentation page for more information:
You can check the available props of the combined component on the dedicated API page.
Some MultiInputDateRangeField props are not available on the Picker component, you can use slotProps.field
to pass them to the field.
Uncontrolled vs. controlled value
The value of the component can be uncontrolled or controlled.
Uncontrolled picker
–
Controlled picker
–
Available components
The component is available in four variants:
The
DesktopDateRangePicker
component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.The
MobileDateRangePicker
component 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.The
DateRangePicker
component which rendersDesktopDateRangePicker
orMobileDateRangePicker
depending on the device it runs on.The
StaticDateRangePicker
component which renders without the popover/modal and field.
Desktop variant
–
Mobile variant
–
Responsive variant
–
Static variant
By default, the DateRangePicker
component renders the desktop version if the media query @media (pointer: fine)
matches.
This can be customized with the desktopModeMediaQuery
prop.
Form props
The component can be disabled or read-only.
disabled
–
readOnly
–
Customization
Render 1 to 3 months
You can render up to 3 months at the same time using the calendars
prop.
1 calendar
–
2 calendars
–
3 calendars
–
Use a single input field
You can pass the SingleInputDateRangeField
component to the Date Range Picker to use it for keyboard editing.
In such case the Picker component can pass the name
prop to the input.
Add shortcuts
To simplify range selection, you can add shortcuts.
- This Week
- Last Week
- Last 7 Days
- Current Month
- Next Month
- Reset
Customize the field
You can find the documentation in the Custom field page.
Localization
See the Date format and localization and Translated components documentation pages for more details.
Validation
See the Validation documentation page for more details.
Month Range Picker 🚧
The Month Range Picker allows setting a range of months.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.