@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

Material-UI pickers

Accessible, customizable, delightful date & time pickers for @material-ui/core

Installation

Note that this package reqiures @material-ui/core v4. It will not work with the old v3. Please read the migration guide if you are updating from v2

// via npm
npm i @material-ui/pickers

// via yarn
yarn add @material-ui/pickers

Now choose the library that pickers will use to work with date. We are providing interfaces for moment, luxon, dayjs and date-fns v2. If you are not using moment in the project (or dont have it in the bundle already) we suggest using date-fns or luxon, because they are much lighter and will be correctly tree-shaked from the bundle. Note, that we are fully relying on date-io for supporting different libraries.

npm i date-fns@next @date-io/date-fns
// or
npm i moment @date-io/moment
// or
npm i luxon @date-io/luxon
// or
npm i dayjs @date-io/dayjs

Then teach pickers which library to use with MuiPickerUtilsProvider. This component takes a utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree.

import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';

function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Root />
    </MuiPickersUtilsProvider>
  );
}

render(<App />, document.querySelector('#app'));

Documentation

Check out the documentation website

Old versions documentation:

Version	Documentation url
v2	https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/

Recently updated?

Changelog available here

Contributing

For information about how to contribute, see the CONTRIBUTING file.

LICENSE

The project is licensed under the terms of MIT license