@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

[!WARNING] The docs website is not online anymore, you can still get access to it by cloning this repository and run yarn dev.

Installation

Note that this package requires @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 don’t 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

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