## flatpickr-hijri-calendar - A plugin for flatpickr (javascript datetime picker)
This plugin is meant to be used with [flatpickr](https://flatpickr.js.org/). It will display the hijri dates in the calendar picker.
## Installation
```bash
npm install --save flatpickr-hijri-calendar
```
This plugin depends on [luxon](https://moment.github.io/luxon/#/) to display hijri dates.
```bash
npm install --save flatpickr-hijri-calendar
```
## Setup
```js
// (1) Import JS
import flatpickr from "flatpickr";
import "flatpickr/dist/l10n/ar";
import flatpickrHijriCalendar from "flatpickr-hijri-calendar";
import { DateTime } from "luxon";
// (2) Import the css files
import 'flatpickr/dist/flatpickr.css'
import "flatpickr-hijri-calendar/dist/flatpickr-hijri-calendar.css";
// Or in a saas file:
// @import "~flatpickr/dist/flatpickr.css";
// @import "~flatpickr-hijri-calendar/dist/flatpickr-hijri-calendar.css";
// (3) Add the plugin to flatpickr plugins option.
flatpickr('.date', {
locale: "ar",
plugins: [
flatpickrHijriCalendar(DateTime, {
showHijriToggle: true, // flase if you don't want to show the toggle button.
}),
],
});
```
## Using CDN
```html
flatpickr hijri calendar
Date 1
```
## Mobile Support
If you want to show hijri dates on mobile, you must disable [flatpickr mobile support](https://flatpickr.js.org/mobile-support/).
```html
```