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.

Material-UI pickers
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:
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