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 plugin:

Date Picker

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

<ThemeProvider theme={theme}>
  <div dir="rtl">
    <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
      <DateTimePicker label="Date Picker" defaultValue={new Date(2022, 1, 1)} />
    </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 />