@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:

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

Then install the date library of your choice (if not already installed). We currently support 4 different 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/base": "^5.0.0-alpha.87",
  "@mui/material": "^5.8.6",
  "@mui/system": "^5.8.0",
  "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

The documentation