@mui/x-date-pickers-pro

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.

README

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
• 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-pro.

import { LocalizationProvider } from '@mui/x-date-pickers-pro';
// date-fns
import { AdapterDateFns } from '@mui/x-date-pickers-pro/AdapterDateFns';
// or for dayjs
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
// or for luxon
import { AdapterLuxon } from '@mui/x-date-pickers-pro/AdapterLuxon';
// or for moment
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.

Changelog

7.12.0

Aug 1, 2024

💵 Our commercial offering is evolving

The Pro plan is receiving two new packages:

• @mui/x-tree-view-pro (available today!)
• @mui/x-charts-pro (available in the coming weeks)

As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.

This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the Upcoming changes to MUI X pricing in 2024 blog post.

Highlights

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

• 🎁 Introduce item reordering using drag and drop on the <RichTreeViewPro /> component

  <img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />

• 📦 Support CommonJS bundle out of the box on @mui/x-charts by adding vendored D3 dependencies.

  • This modifies how the package imports D3.js. It will impact you if you use d3 packages installed by @mui/x-charts and don't have them in your package.json. You shouldn't be affected otherwise.

  • For more context, the initial issue is caused by D3 only exporting ESM.

    

  • The solution up until now was to export charts with only ESM. But some frameworks are confused by this configuration.

    

  • So in order to fix this, we are providing a CJS version of D3.

    

• 🌍 Improve Turkish (tr-TR) locale on the Data Grid

• 🌍 Improve Finnish (fi-FI) locale on the Date and Time Pickers

• 🐞 Bugfixes

• 📚 Documentation improvements

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid