@mui/x-date-pickers
Version:
The community edition of the Date and Time Picker components (MUI X).
65 lines (50 loc) • 1.9 kB
Markdown
# MUI X Date Pickers
This package is the Community plan edition of the Date and Time Picker components.
It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
## Installation
Install the package in your project directory with:
```bash
npm install /x-date-pickers
```
Then install the date library of your choice (if not already installed).
The pickers currently support the following date libraries:
- [date-fns](https://date-fns.org/)
- [Day.js](https://day.js.org/)
- [Luxon](https://moment.github.io/luxon/#/)
- [Moment.js](https://momentjs.com/)
```bash
// 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 will need to install as well.
```json
"peerDependencies": {
"@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
```
After completing the installation, you have to set the `dateAdapter` prop of the `LocalizationProvider` accordingly.
The supported adapters are exported from `/x-date-pickers`.
```jsx
import { LocalizationProvider } from '/x-date-pickers/LocalizationProvider';
// date-fns
import { AdapterDateFns } from '/x-date-pickers/AdapterDateFns';
// or for dayjs
import { AdapterDayjs } from '/x-date-pickers/AdapterDayjs';
// or for luxon
import { AdapterLuxon } from '/x-date-pickers/AdapterLuxon';
// or for moment
import { AdapterMoment } from '/x-date-pickers/AdapterMoment';
function App({ children }) {
return <LocalizationProvider dateAdapter={AdapterDateFns}>{children}</LocalizationProvider>;
}
```
## Documentation
Visit [https://mui.com/x/react-date-pickers/](https://mui.com/x/react-date-pickers/) to view the full documentation.