Date Range Calendar
The Date Range Calendar lets the user select a range of dates without any input or popper / modal.
Basic usage
Uncontrolled vs. controlled value
The value of the component can be uncontrolled or controlled.
Uncontrolled calendar
Controlled calendar
Form props
The component can be disabled or read-only.
disabled
readOnly
Customization
Choose the months to render
You can render up to 3 months at the same time using the calendars prop:
1 calendar
2 calendars
You can choose the position where the current month is rendered using the currentMonthCalendarPosition prop.
This can be useful when using disableFuture to render the current month and the month before instead of the current month and the month after.
Custom day rendering
The displayed days are customizable with the Day component slot.
You can take advantage of the DateRangePickerDay component.
Localization
See the Date format and localization and Translated components documentation pages for more details.
Validation
See the Validation documentation page for more details.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.