Calendar systems

Use the Date and Time Pickers with non-Gregorian calendars.

Jalali

You can use either the AdapterDateFnsJalali adapter, which is based on date-fns-jalali, or the AdapterMomentJalaali adapter, which is based on moment-jalaali.

The following demo shows how to use the date-fns-jalali adapter:

AdapterDateFnsJalali

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
      <DateTimePicker
        label="AdapterDateFnsJalali"
        defaultValue={new Date(2022, 1, 1, 12)}
      />
    </LocalizationProvider>
  </div>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
      <DateTimePicker
        label="AdapterDateFnsJalali"
        defaultValue={new Date(2022, 1, 1, 12)}
      />
    </LocalizationProvider>
  </div>
</ThemeProvider>

Press Enter to start editing

Both date-fns-jalali major versions (v2.x and v3.x) are supported.

A single adapter cannot work for both date-fns-jalali v2.x and v3.x, because the way functions are exported has been changed in v3.x.

To use date-fns-jalali v3.x, you will have to import the adapter from @mui/x-date-pickers/AdapterDateFnsJalaliV3 instead of @mui/x-date-pickers/AdapterDateFnsJalali.

// with date-fns-jalali v2.x
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
// with date-fns-jalali v3.x
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';

The following demo shows how to use the moment-jalaali adapter:

AdapterMomentJalaali

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterMomentJalaali}>
      <DateTimePicker
        label="AdapterMomentJalaali"
        defaultValue={moment('2022-02-01T12:00:00')}
      />
    </LocalizationProvider>
  </div>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterMomentJalaali}>
      <DateTimePicker
        label="AdapterMomentJalaali"
        defaultValue={moment('2022-02-01T12:00:00')}
      />
    </LocalizationProvider>
  </div>
</ThemeProvider>

Press Enter to start editing

Hijri

You can use the AdapterMomentHijri adapter, which is based on moment-hijri:

Date Picker

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterMomentHijri}>
      <DateTimePicker
        label="Date Picker"
        defaultValue={moment(new Date(2022, 1, 1))}
        // moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
        minDate={moment(new Date(1938, 0, 1))}
        maxDate={moment(new Date(2075, 11, 31))}
      />
    </LocalizationProvider>
  </div>
</ThemeProvider>

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterMomentHijri}>
      <DateTimePicker
        label="Date Picker"
        defaultValue={moment(new Date(2022, 1, 1))}
        // moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
        minDate={moment(new Date(1938, 0, 1))}
        maxDate={moment(new Date(2075, 11, 31))}
      />
    </LocalizationProvider>
  </div>
</ThemeProvider>

Press Enter to start editing

Unsupported libraries

If you need to use a date library that is not supported yet, please open an issue in the MUI X repository.

API

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

<LocalizationProvider />