@mui/x-date-pickers

MUI X Date Pickers

This package is the Community 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:

npm install @mui/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
• Day.js
• Luxon
• Moment.js

# 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 || ^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 @mui/x-date-pickers.

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// date-fns
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// or for dayjs
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
// or for luxon
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
// or for moment
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

function App({ children }) {
  return <LocalizationProvider dateAdapter={AdapterDateFns}>{children}</LocalizationProvider>;
}

Documentation

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

Similar packages

Other packages similar to @mui/x-date-pickers

react-datepicker

react-datepicker is a simple and reusable datepicker component for React. It is similar to @mui/x-date-pickers but does not require Material-UI and has its own styling and layout.

react-dates

react-dates is an accessible, easily internationalizable, mobile-friendly datepicker library for the web. It is different from @mui/x-date-pickers in that it is built by Airbnb and has a different design aesthetic.

antd

antd, or Ant Design, is a design system that includes a DatePicker component. It is similar to @mui/x-date-pickers but is part of a larger design system with a different design language.

react-day-picker

react-day-picker is a flexible date picker component for React. Unlike @mui/x-date-pickers, it does not rely on Material-UI and offers more customization options for the calendar component.