What is @mui/x-date-pickers-pro?
@mui/x-date-pickers-pro is a comprehensive set of date and time picker components for React applications. It is part of the MUI (Material-UI) library and provides advanced features for handling date and time inputs, including keyboard navigation, localization, and validation.
What are @mui/x-date-pickers-pro's main functionalities?
Date Picker
The Date Picker component allows users to select a date from a calendar view. It supports various customization options, including different date formats and localization.
import * as React from 'react';
import { DatePicker } from '@mui/x-date-pickers-pro/DatePicker';
import TextField from '@mui/material/TextField';
function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
export default BasicDatePicker;
Date Time Picker
The Date Time Picker component combines date and time selection in a single interface. It is useful for applications that require precise date and time inputs.
import * as React from 'react';
import { DateTimePicker } from '@mui/x-date-pickers-pro/DateTimePicker';
import TextField from '@mui/material/TextField';
function BasicDateTimePicker() {
const [value, setValue] = React.useState(null);
return (
<DateTimePicker
label="DateTime picker"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
export default BasicDateTimePicker;
Time Picker
The Time Picker component allows users to select a specific time. It provides a user-friendly interface for time selection and supports various time formats.
import * as React from 'react';
import { TimePicker } from '@mui/x-date-pickers-pro/TimePicker';
import TextField from '@mui/material/TextField';
function BasicTimePicker() {
const [value, setValue] = React.useState(null);
return (
<TimePicker
label="Time picker"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
export default BasicTimePicker;
Date Range Picker
The Date Range Picker component allows users to select a range of dates. It is useful for applications that require start and end date inputs, such as booking systems or reporting tools.
import * as React from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import TextField from '@mui/material/TextField';
function BasicDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
return (
<DateRangePicker
startText="Start"
endText="End"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<TextField {...endProps} />
</>
)}
/>
);
}
export default BasicDateRangePicker;
Other packages similar to @mui/x-date-pickers-pro
react-datepicker
react-datepicker is a simple and customizable date picker component for React. It offers basic date picking functionality and is easy to integrate into any React application. Compared to @mui/x-date-pickers-pro, it has fewer features and customization options but is lightweight and straightforward to use.
react-dates
react-dates is a date picker library developed by Airbnb. It provides a range of date picking components, including single date pickers and date range pickers. It offers advanced features like internationalization and custom styling. Compared to @mui/x-date-pickers-pro, it is more focused on date picking and does not include time picking functionalities.
rc-calendar
rc-calendar is a date and time picker component for React. It provides a comprehensive set of features for date and time selection, including support for different locales and custom date formats. Compared to @mui/x-date-pickers-pro, it offers similar functionalities but may require more configuration and customization.
MUI X Date Pickers Pro
This package is the Pro plan edition of the Date and Time Picker Components.
It's part of MUI X, an open-core extension of MUI Core, with advanced components.
Installation
Install the package in your project directory with:
npm install @mui/x-date-pickers-pro
Then install the date library of your choice (if not already installed).
The pickers currently support the following date libraries:
// date-fns
npm install date-fns
// or dayjs
npm install dayjs
// or luxon
npm install luxon
// or moment
npm install moment
This component has the following peer dependencies that you need to install as well.
"peerDependencies": {
"@mui/material": "^5.15.14 || ^6.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
After completing the installation, you have to set the dateAdapter
prop of the LocalizationProvider
accordingly.
The supported adapters are exported from @mui/x-date-pickers-pro
.
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDateFns } from '@mui/x-date-pickers-pro/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { AdapterLuxon } from '@mui/x-date-pickers-pro/AdapterLuxon';
import { AdapterMoment } from '@mui/x-date-pickers-pro/AdapterMoment';
function App({ children }) {
return <LocalizationProvider dateAdapter={AdapterDateFns}>{children}</LocalizationProvider>;
}
Documentation
Visit https://mui.com/x/react-date-pickers/ to view the full documentation.
8.0.0-alpha.0
<img width="100%" alt="MUI X v8 Alpha is live" src="https://github.com/user-attachments/assets/114cf615-b617-435f-8499-76ac3c26c57b">
Nov 14, 2024
We'd like to offer a big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
-
🔁 Support automatic parents and children selection for the Rich Tree View components.
-
🌍 Improve Greek (el-GR) locale on the Date and Time Pickers components
-
🌍 Improve Polish (pl-PL) locale on the Data Grid component
-
🐞 Bugfixes
-
📚 Documentation improvements
Special thanks go out to the community contributors who have helped make this release possible:
@belkocik, @GeorgiosDrivas, @k-rajat19, @kalyan90, @DungTiger, @fxnoob, @GuillaumeMeheut
Following are all team members who have contributed to this release:
@alexfauquette, @arminmeh, @arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @oliviertassinari, @romgrk, @samuelsycamore, @joserodolfofreitas.
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
Data Grid