Date Range Picker ⚡️
Date pickers let the user select a range of dates.
⚠️ Premium component
The date range picker is intended for Material-UI X, a commercial set of advanced components built on top of the community edition (MIT license) of Material-UI.
This paid extension will include more advanced components (rich data grid, date range picker, tree view drag & drop, etc.). Early access starts at an affordable price.
The date range pickers let the user select a range of dates.
Requirements
This component relies on the date management library of your choice. It supports date-fns, luxon, dayjs, moment and any other library via a public dateAdapter interface.
Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with LocalizationProvider:
// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter
import DateFnsAdapter from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
function App() {
return (
<LocalizationProvider dateAdapter={DateFnsAdapter}>...</LocalizationProvider>
);
}Basic usage
Note that you can pass almost any prop from DatePicker.
mm/dd/yyyy
to
mm/dd/yyyy
Responsiveness
The date range picker component is designed to be optimized for the device it runs on.
- The "Mobile" version works best for touch devices and small screens.
- The "Desktop" version works best for mouse devices and large screens.
By default, the DateRangePicker component uses a @media (pointer: fine) media query to determine which version to use. This can be customized with the desktopModeMediaQuery prop.
mm/dd/yyyy
to
mm/dd/yyyy
mm/dd/yyyy
to
mm/dd/yyyy
1 calendar
mm/dd/yyyy
to
mm/dd/yyyy
2 calendars
mm/dd/yyyy
to
mm/dd/yyyy
3 calendars
mm/dd/yyyy
to
mm/dd/yyyy
mm/dd/yyyy
to
mm/dd/yyyy
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.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateRangePicker
label="Advanced keyboard"
value={selectedDate}
onChange={(date) => handleDateChange(date)}
renderInput={(startProps, endProps) => (
<React.Fragment>
<input ref={startProps.inputRef} {...startProps.inputProps} />
<input ref={endProps.inputRef} {...endProps.inputProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>Static mode
It is possible to render any picker without a modal or popper. For this use StaticDateRangePicker.
December 2020
January 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticDateRangePicker
displayStaticWrapperAs="desktop"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} variant="standard" />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} variant="standard" />
</React.Fragment>
)}
/>
</LocalizationProvider>