import Ad from '_shared/Ad';
import Example from '_shared/Example';
import PageMeta from '_shared/PageMeta';
import * as PersianExample from './Persian.example';
import * as HijriExample from './Hijri.example';

<PageMeta title="Additional Calendar Systems - @material-ui/pickers" />

## Additional calendar systems

<Ad />

Make sure that you have read the [right to left section](https://material-ui-next.com/guides/right-to-left/) 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` and `moment-jalaali` packages from npm.

```
npm install @date-io/jalaali moment-jalaali
```

#### Example

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

<Example source={PersianExample} />
<hr />

#### 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`

```javascript
import 'moment/locale/ar-sa';
```

By default, the `DatePicker` uses `1900-01-01` for minDate and `2099-31-12` 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.

```jsx
<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.

<Example source={HijriExample} />