Material-UI pickers
v3.2.9

Additional calendar systems#

Make sure that you have read the right to left section of the material-ui documentation page before proceeding.

Install the specified npm packages below for Jalaali or Hijri depending on which calendar system you will be using.

Jalaali calendar system#

Install @date-io/jalaali package from npm.

npm install @date-io/jalaali

Example#

You can use the examples below. It is recommended that you change the font.

import moment from "moment";
import jMoment from "moment-jalaali";
import React, { useState } from "react";
import JalaliUtils from "@date-io/jalaali";
import {
  TimePicker,
  DateTimePicker,
  DatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

jMoment.loadPersian({ dialect: "persian-modern", usePersianDigits: true });

function PersianExample() {
  const [selectedDate, handleDateChange] = useState(moment());

  return (
    <MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">
      <DatePicker
        clearable
        okLabel="تأیید"
        cancelLabel="لغو"
        clearLabel="پاک کردن"
        labelFunc={date => (date ? date.format("jYYYY/jMM/jDD") : "")}
        value={selectedDate}
        onChange={handleDateChange}
      />

      <TimePicker
        clearable
        okLabel="تأیید"
        cancelLabel="لغو"
        clearLabel="پاک کردن"
        labelFunc={date => (date ? date.format("hh:mm A") : "")}
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        okLabel="تأیید"
        cancelLabel="لغو"
        labelFunc={date => (date ? date.format("jYYYY/jMM/jDD hh:mm A") : "")}
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  );
}

export default PersianExample;

Hijri calendar system#

Install @date-io/hijri and moment-hijri packages from npm.

npm install @date-io/hijri moment-hijri

To use it with Arabic locale, make sure to import moment/locale/ar-sa

import 'moment/locale/ar-sa';

By default, the DatePicker uses 1900-01-01 for minDate and 2100-01-01 for maxDate. moment-hijri only supports dates from 1356-01-01 H (1937-03-14) to 1499-12-29 H (2076-11-26) so you will need to set minDate and maxDate on your DatePicker component otherwise your component will not work properly.

<DatePicker
  // your props
  minDate="1937-03-14"
  maxDate="2076-11-26"
/>

Example#

You can use the examples below. It is recommended that you change the font.

import moment from "moment";
import React, { useState } from "react";
import HijriUtils from "@date-io/hijri";
import {
  TimePicker,
  DateTimePicker,
  DatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";
import "moment/locale/ar-sa";

function HijriExample() {
  const [selectedDate, handleDateChange] = useState(moment());

  return (
    <MuiPickersUtilsProvider utils={HijriUtils} locale="ar-SA">
      <DatePicker
        clearable
        okLabel="موافق"
        cancelLabel="الغاء"
        clearLabel="مسح"
        labelFunc={date => (date ? date.format("iYYYY/iMM/iDD") : "")}
        value={selectedDate}
        onChange={handleDateChange}
        minDate="1937-03-14"
        maxDate="2076-11-26"
      />

      <TimePicker
        clearable
        okLabel="موافق"
        cancelLabel="الغاء"
        clearLabel="مسح"
        labelFunc={date => (date ? date.format("hh:mm A") : "")}
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        okLabel="موافق"
        cancelLabel="الغاء"
        labelFunc={date => (date ? date.format("iYYYY/iMM/iDD hh:mm A") : "")}
        value={selectedDate}
        onChange={handleDateChange}
        minDate="1937-03-14"
        maxDate="2076-11-26"
      />
    </MuiPickersUtilsProvider>
  );
}

export default HijriExample;