The date range picker let the user select a range of dates.
Basic usage
Note that you can pass almost any prop from DatePicker.
to
Static mode
It's possible to render any picker inline. This will enable building custom popover/modal containers.
October 2022
SMTWTFS
November 2022
SMTWTFS
<LocalizationProviderdateAdapter={AdapterDayjs}><StaticDateRangePickerdisplayStaticWrapperAs="desktop"value={value}onChange={(newValue)=>{setValue(newValue);}}renderInput={(startProps, endProps)=>(<React.Fragment><TextField{...startProps}/><Boxsx={{ mx:2}}> to </Box><TextField{...endProps}/></React.Fragment>)}/></LocalizationProvider>
Press Enter to start editing
Responsiveness
The date range picker component is designed to be optimized for the device it runs on.
The MobileDateRangePicker component works best for touch devices and small screens.
The DesktopDateRangePicker component works best for mouse devices and large screens.
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.
There are certain caveats when testing pickers, please refer to this section for more information.
to
to
Form props
The date range picker component can be disabled or read-only.
to
to
Different number of months
Note that the calendars prop only works in desktop mode.
1 calendar
to
2 calendars
to
3 calendars
to
Disabling dates
Disabling dates behaves the same as the simple DatePicker.
to
Custom input component
You can customize the rendered input with the renderInput prop. For DateRangePicker it takes 2 parameters – for start and end input respectively.
If you need to render custom inputs make sure to spread ref and inputProps correctly to the input components.
to
Customized day rendering
The displayed days are customizable with the renderDay function prop.
You can take advantage of the internal DateRangePickerDay component.
October 2022
SMTWTFS
November 2022
SMTWTFS
<LocalizationProviderdateAdapter={AdapterDayjs}><StaticDateRangePickerdisplayStaticWrapperAs="desktop"label="date range"value={value}onChange={(newValue)=>setValue(newValue)}renderDay={renderWeekPickerDay}renderInput={(startProps, endProps)=>(<React.Fragment><TextField{...startProps}/><Boxsx={{ mx:2}}> to </Box><TextField{...endProps}/></React.Fragment>)}/></LocalizationProvider>
Press Enter to start editing
🚧 Pre-defined range shortcuts
Range shortcuts allows your users to select a commonly-used range in one click (eg: last week, last month, …)
🚧 Month range Picker
Month range picker allows setting date ranges by picking months only.