Localized dates

Date and Time Pickers support formats from different locales.

Getting started

The default locale of MUI is English (United States). If you want to use other locales—follow the instructions below.

Set a custom locale

With dayjs

For dayjs, import the locale and then pass its name to LocalizationProvider:

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/de';

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
  {children}
</LocalizationProvider>;

With date-fns

For date-fns, import the locale and pass it to LocalizationProvider:

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
  {children}
</LocalizationProvider>;

With luxon

For luxon, pass the locale name to LocalizationProvider:

import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';

<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="de">
  {children}
</LocalizationProvider>;

With moment

For moment, import the locale and then pass its name to LocalizationProvider:

import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import 'moment/locale/de';

<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de">
  {children}
</LocalizationProvider>;

12h/24h format

All the time and datetime components will automatically adjust to the locale's time setting, i.e. the 12-hour or 24-hour format. You can override the default setting with the ampm prop:

Custom formats

Custom field format

The fields have a default format that depends on the picker being used, the views enabled, and the 12h/24h format.

If this default format does not suit you, you can customize it using the format prop:

Custom field placeholder

When a section is empty, the fields displays its placeholder instead of an empty value. For example, if you did not fill any value for the year section, the field will render the year placeholder.

These placeholders are based on your current component localization, not on your date localization.

For more information on how to define your component localization, check out the Translated components page.

Custom toolbar format

To customize the format used in the toolbar, use the toolbarFormat prop of the toolbar slot.

Custom day of week format

Use dayOfWeekFormatter to customize day names in the calendar header. This prop takes the short name of the day provided by the date library as an input, and returns it's formatted version. The default formatter only keeps the first letter and capitalises it.

The example below adds a dot at the end of each day in the calendar header:

Use UTC dates

With dayjs

To use UTC dates with dayjs, you have to:

1. Extend dayjs with its utc plugin:

   import dayjs from 'dayjs';
   import utc from 'dayjs/plugin/utc';
   
   dayjs.extend(utc);
   

   Copy (or $keyC)

2. Pass dayjs.utc to LocalizationProvider dateLibInstance prop:

   <LocalizationProvider dateAdapter={AdapterDayjs} dateLibInstance={dayjs.utc}>
     {children}
   </LocalizationProvider>
   

   Copy (or $keyC)

3. Always pass dates created with dayjs.utc:

   <DateTimePicker
     // ✅ Valid props
     value={dayjs.utc()}
     minDate={dayjs.utc().startOf('month')}
     // ❌ Invalid props
     value={dayjs()}
     minDate={dayjs().startOf('month')}
   />
   

   Copy (or $keyC)

With moment

To use UTC dates with moment, you have to:

1. Pass moment.utc to LocalizationProvider dateLibInstance prop:

   <LocalizationProvider dateAdapter={AdapterMoment} dateLibInstance={moment.utc}>
     {children}
   </LocalizationProvider>
   

   Copy (or $keyC)

2. Always pass dates created with moment.utc:

   <DateTimePicker
     // ✅ Valid props
     value={moment.utc()}
     minDate={moment.utc().startOf('month')}
     // ❌ Invalid props
     value={moment()}
     minDate={moment().startOf('month')}
   />
   

   Copy (or $keyC)

Other libraries

UTC support is an ongoing topic.

We will update the documentation with examples using other date libraries once the support for them will be sufficient.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <LocalizationProvider />