Skip to content

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:

If you need to use js-joda, date-fns-jalali, jalaali, or hijri library, you should be able to find the corresponding date-library from @date-io.

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 @date-io/dayjs
// or for Luxon
npm install @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 { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// or for Day.js
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
// or for Luxon
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
// or for Moment.js
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

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

TypeScript

In order to benefit from the CSS overrides and default prop customization with the theme, TypeScript users need to import the following types. Internally, it uses module augmentation to extend the default theme structure.

// When using TypeScript 4.x and above
import type {} from '@mui/x-date-pickers/themeAugmentation';
import type {} from '@mui/x-date-pickers-pro/themeAugmentation';
// When using TypeScript 3.x and below
import '@mui/x-date-pickers/themeAugmentation';
import '@mui/x-date-pickers-pro/themeAugmentation';

const theme = createTheme({
  components: {
    MuiDatePicker: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

Native pickers

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