The date range picker let the user select a range of dates.
Note that you can pass almost any prop from DatePicker.
It's possible to render any picker inline. This will enable building custom popover/modal containers.
The date range picker component is designed to be optimized for the device it runs on.
MobileDateRangePickercomponent works best for touch devices and small screens.
DesktopDateRangePickercomponent 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
There are certain caveats when testing pickers, please refer to this section for more information.
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
inputProps correctly to the input components.
The displayed days are customizable with the
renderDay function prop.
You can take advantage of the internal DateRangePickerDay component.
Range shortcuts allows your users to select a commonly-used range in one click (eg: last week, last month, …)
Month range picker allows setting date ranges by picking months only.