@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 commercial edition of the date and time picker components. It's part of MUI X, an open core extension of MUI, with advanced components.

Installation

Install the package in your project directory with:

// with npm
npm install @mui/x-date-pickers-pro

// with yarn
yarn add @mui/x-date-pickers-pro

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

"peerDependencies": {
  "@mui/material": "^5.4.1",
  "@mui/system": "^5.4.1",
  "react": "^17.0.2 || ^18.0.0"
},

You need to provide a date-library that is used by the pickers by setting the dateAdapter to an adapter of your choosing.

We currently support 4 different date-libraries:

• date-fns
• Day.js
• Luxon
• Moment.js

If you need to use js-joda, date-fns-jalali, jalaali, or hijri library, you should be able to find the corresponding date-library from @date-io.

First, you have to install the adapter package for the date-library you want to use:

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install @date-io/dayjs
// or for Luxon
npm install @date-io/luxon
// or for Moment.js
npm install @date-io/moment

Then you have to set the dateAdapter prop of the LocalizationProvider accordingly:

// date-fns
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// or for Day.js
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
// or for Luxon
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
// or for Moment.js
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

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

Documentation

The documentation