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 our Core libraries, with advanced components.

Installation

Install the package in your project directory with:

1npm 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
• Day.js
• Luxon
• Moment.js

1# date-fns
2npm install date-fns
3
4# or dayjs
5npm install dayjs
6
7# or luxon
8npm install luxon
9
10# or moment
11npm install moment

This component has the following peer dependencies that you need to install as well.

1"peerDependencies": {
2  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
3  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
4  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
5},

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.

1import { LocalizationProvider } from '@mui/x-date-pickers-pro';
2// date-fns
3import { AdapterDateFns } from '@mui/x-date-pickers-pro/AdapterDateFns';
4// or for dayjs
5import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
6// or for luxon
7import { AdapterLuxon } from '@mui/x-date-pickers-pro/AdapterLuxon';
8// or for moment
9import { AdapterMoment } from '@mui/x-date-pickers-pro/AdapterMoment';
10
11function App({ children }) {
12  return <LocalizationProvider dateAdapter={AdapterDateFns}>{children}</LocalizationProvider>;
13}

Documentation

Visit https://mui.com/x/react-date-pickers/ to view the full documentation.