Material-UI pickers


Available as an npm package

npm i @material-ui/pickers

yarn add @material-ui/pickers

Peer Library#

@material-ui/pickers was designed to use the date management library of your choice. We are providing interfaces for moment, date-fns 2, luxon and dayjs.

Important: For material-ui-pickers v3 use v1.x version of @date-io adapters.

npm i @date-io/date-fns@1.x date-fns
// or
npm i @date-io/moment@1.x moment
// or
npm i -s @date-io/luxon@1.x luxon
// or
npm i -s @date-io/dayjs@1.x dayjs

Tell pickers which date management library it should use with MuiPickersUtilsProvider. This component takes a utils prop, and makes it available down the React tree with React Context. It should be used at the root of your component tree, or at the highest level you wish the pickers to be available.

import { MuiPickersUtilsProvider } from '@material-ui/pickers';

// pick a date util library
import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';

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

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