@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 picker component. 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

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

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

"peerDependencies": {
  "@mui/material": "^5.0.0",
  "react": "^17.0.0"
},

Documentation

The documentation