@mui/x-date-pickers

What is @mui/x-date-pickers?

The @mui/x-date-pickers package provides date and time selection components that integrate with Material-UI. It allows developers to implement date pickers, time pickers, date-time pickers, and calendar views with ease, offering a consistent design language and user experience aligned with Material Design guidelines.

What are @mui/x-date-pickers's main functionalities?

DatePicker

The DatePicker component allows users to select a date from a calendar dialog.

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

function BasicDatePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <DatePicker
      label="Basic example"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

TimePicker

The TimePicker component provides a way for users to select a time.

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

function BasicTimePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <TimePicker
      label="Basic example"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

DateTimePicker

The DateTimePicker combines date and time selection in one control.

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

function BasicDateTimePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <DateTimePicker
      label="Basic example"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

Calendar

The Calendar component displays a full calendar view for date selection without a text field.

import * as React from 'react';
import { Calendar } from '@mui/x-date-pickers/Calendar';

function BasicCalendar() {
  const [date, setDate] = React.useState(new Date());

  return (
    <Calendar
      date={date}
      onChange={(newDate) => setDate(newDate)}
    />
  );
}

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.

README

MUI X Date Pickers

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

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 will need to install as well.

"peerDependencies": {
  "@mui/material": "^5.15.14",
  "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.

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.

Changelog

7.0.0

Mar 22, 2024

We're excited to announce the first v7 stable release! 🎉🚀

This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements. Migration guides are available with a complete list of the breaking changes:

• Data Grid
• Date and Time Pickers
• Tree View
• Charts

We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

• 🚀 Improve the usage of custom viewRenderers on DateTimePicker (#12441) @LukasTy
• ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
• 🕹️ Support controlled density for the Data Grid (#12332) @MBilalShafi
• 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
• 🐞 Bugfixes
• 📚 Documentation improvements

Data Grid

Breaking changes

• The density is a controlled prop now, if you were previously passing the density prop to the Data Grid, you will need to do one of the following:

  1. Move it to the initialState.density to initialize it.

   <DataGrid
  -  density="compact"
  +  initialState={{ density: "compact" }}
   />
  

  1. Move it to the state and use onDensityChange callback to update the density prop accordingly for it to work as expected.

  + const [density, setDensity] = React.useState<GridDensity>('compact');
   <DataGrid
  -  density="compact"
  +  density={density}
  +  onDensityChange={(newDensity) => setDensity(newDensity)}
   />
  

• The selector gridDensityValueSelector was removed, use the gridDensitySelector instead.

• The props rowBuffer and columnBuffer were renamed to rowBufferPx and columnBufferPx. Their value is now a pixel value rather than a number of items. Their default value is now 150.

• The props rowThreshold and columnThreshold have been removed. If you had the rowThreshold prop set to 0 to force new rows to be rendered more often – this is no longer necessary.