Skip to content
Edit this page

Date / Time pickers

Date pickers and Time pickers allow selecting a single value from a pre-determined set.

  • On mobile, pickers are best suited for display in a confirmation dialog.
  • For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.

React components

Setup

You need to provide a date-library that is used by the pickers by setting the dateAdapter to an adapter of your choosing.

We currently support 4 different date-libraries:

First you have to install the adapter package for the date-library you want to use:

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install -s @date-io/dayjs
// or for Luxon
npm install -s @date-io/luxon
// or for Moment.js
npm install @date-io/moment

Then you have to set the dateAdapter prop of the LocalizationProvider accordingly:

// date-fns
import DateAdapter from '@mui/lab/AdapterDateFns';
// or for Day.js
import DateAdapter from '@mui/lab/AdapterDayjs';
// or for Luxon
import DateAdapter from '@mui/lab/AdapterLuxon';
// or for Moment.js
import DateAdapter from '@mui/lab/AdapterMoment';

function App({ children }) {
  return (
    <LocalizationProvider dateAdapter={DateAdapter}>{children}</LocalizationProvider>
  );
}

Native pickers

⚠️ Native input controls support by browsers isn't perfect.

Native date (type="date"), time (type="time") and date&time (type="datetime-local") pickers.

API