@material-ui/pickers

What is @material-ui/pickers?

@material-ui/pickers is a package that provides date and time pickers built using Material-UI. It offers a variety of components to handle date and time selection in a user-friendly and visually appealing manner.

What are @material-ui/pickers's main functionalities?

Date Picker

The Date Picker component allows users to select a date from a calendar view. The selected date is managed using React state.

import React from 'react';
import { DatePicker } from '@material-ui/pickers';

function App() {
  const [selectedDate, handleDateChange] = React.useState(new Date());

  return (
    <DatePicker
      value={selectedDate}
      onChange={handleDateChange}
      label="Select Date"
    />
  );
}

export default App;

Time Picker

The Time Picker component allows users to select a time. The selected time is managed using React state.

import React from 'react';
import { TimePicker } from '@material-ui/pickers';

function App() {
  const [selectedTime, handleTimeChange] = React.useState(new Date());

  return (
    <TimePicker
      value={selectedTime}
      onChange={handleTimeChange}
      label="Select Time"
    />
  );
}

export default App;

DateTime Picker

The DateTime Picker component allows users to select both date and time. The selected date and time are managed using React state.

import React from 'react';
import { DateTimePicker } from '@material-ui/pickers';

function App() {
  const [selectedDateTime, handleDateTimeChange] = React.useState(new Date());

  return (
    <DateTimePicker
      value={selectedDateTime}
      onChange={handleDateTimeChange}
      label="Select Date & Time"
    />
  );
}

export default App;

Other packages similar to @material-ui/pickers

react-datepicker

react-datepicker is a simple and customizable date picker component for React. It offers a variety of features including date range selection, custom date formats, and localization. Compared to @material-ui/pickers, it is more lightweight but may lack some of the advanced features and styling options provided by Material-UI.

react-dates

react-dates is a date picker library developed by Airbnb. It provides a highly customizable and accessible date picker component. It supports date ranges, single date selection, and custom day rendering. While it offers robust functionality, it may require more configuration compared to @material-ui/pickers.

rc-calendar

rc-calendar is a date and time picker component for React. It provides a flexible and customizable calendar interface. It supports various date and time formats, as well as range selection. Compared to @material-ui/pickers, it is more flexible but may require additional styling to match the Material-UI design.

README

⚠️ The end of @material-ui/pickers 🙈, long live @mui/x-date-pickers

See #2157 for more details.