---
title: "JQuery Range Gregorian Jalali Hijri Example | Mobiscroll"
component: "Range"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/range/gregorian-jalali-hijri"
---

# Gregorian Jalali Hijri - jQuery Range demo

Use the JQuery date range picker with Gregorian, Jalali, and Hijri calendar systems to support regional user bases. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/range/gregorian-jalali-hijri)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/datepicker/range/gregorian-jalali-hijri)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/range/gregorian-jalali-hijri.md), [Angular](https://demo.mobiscroll.com/angular/range/gregorian-jalali-hijri.md), [React](https://demo.mobiscroll.com/react/range/gregorian-jalali-hijri.md), [Vue](https://demo.mobiscroll.com/vue/range/gregorian-jalali-hijri.md)

## Description

The date picker supports multiple calendar systems. You can control it with the [`calendarSystem`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-calendarSystem) setting, and it supports the following options:

- **Gregorian** - it is included by default
- **Jalali** - it is the default system of the Persian calendar and is included within the Farsi language pack
- **Hijri** - it is included in the Arabic language pack

**Interested in localization?** [Explore this example →](https://demo.mobiscroll.com/jquery/range/localization)

## What this demo shows

- Shows a date range picker example for selecting a start and end date from a monthly calendar.
- **Calendar system picker** The left side of the calendar shows a "Pick a calendar system" label with three options, where Gregorian is selected by default and choosing another option (Jalali or Hijri) updates the calendar system.
- **Inline date range picker** This example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## Best for

- **Regional user experiences** Products that need to present dates in the calendar system users already rely on, such as Gregorian for international audiences, Jalali for Persian-speaking users, or Hijri for Arabic-speaking users.

## Tutorial

### Pick a calendar system

- (x) Gregorian
- ( ) Jalali
- ( ) Hijri

```js
$('#picker').mobiscroll().datepicker({
    locale: mobiscroll.localeEn
});
```

With "Jalali":

```js
$('#picker').mobiscroll().datepicker({
    calendarSystem: mobiscroll.jalaliCalendar,
    locale: mobiscroll.localeFa
});
```

With "Hijri":

```js
$('#picker').mobiscroll().datepicker({
    calendarSystem: mobiscroll.hijriCalendar,
    locale: mobiscroll.localeAr
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) - option
- [`select`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-display) - option
- [`locale`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-locale) - option
- [`calendarSystem`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-calendarSystem) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  $('#demo-gregorian')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      select: 'range',
      display: 'inline',
      locale: mobiscroll.locale.en,
    });

  $('#demo-jalali')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      select: 'range',
      display: 'inline',
      calendarSystem: mobiscroll.jalaliCalendar,
      locale: mobiscroll.locale.fa,
    });

  $('#demo-hijri')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      select: 'range',
      display: 'inline',
      calendarSystem: mobiscroll.hijriCalendar,
      locale: mobiscroll.locale.ar,
    });
});
```

### HTML

```html
<div id="demo-gregorian"></div>
<div id="demo-jalali"></div>
<div id="demo-hijri"></div>
```

## Implementation notes

- Use `controls: ['calendar']`, `select: 'range'`, `display: 'inline'`, and `showRangeLabels: true` for the base range calendar.
- Set `calendarSystem` to switch the calendar rendering: `gregorianCalendar` (default, no Farsi/Arabic pack needed), `jalaliCalendar` (Persian calendar, requires the Farsi language pack), or `hijriCalendar` (requires the Arabic language pack).
- Pair each `calendarSystem` with the matching `locale`: `locale.fa` for Jalali, `locale.ar` for Hijri, `locale.en` (or omitted) for Gregorian - the calendar system and locale are set together, not independently.
- Import paths differ per framework: JS/jQuery reference them off the global namespace (`mobiscroll.jalaliCalendar`, `mobiscroll.locale.fa`); React/Angular/Vue import `jalaliCalendar`/`hijriCalendar`/`gregorianCalendar` and `localeFa`/`localeAr`/`localeEn` as named exports from `@mobiscroll/<framework>` and pass them as `calendarSystem`/`locale` values (React: `calendarSystem={jalaliCalendar}`; Angular: `[calendarSystem]="jalaliCalendar"`; Vue: `:calendarSystem="jalaliCalendar"`).
- Both `calendarSystem` and `locale` can be swapped at runtime via `.setOptions({ calendarSystem, locale })` on the picker instance without recreating the component.
- The selected start/end dates are set with `.setVal([startDate, endDate], true)`; the stored value is unaffected by which calendar system is used to display it.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-jquery.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config jquery
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Previous: [Event Hooks](https://demo.mobiscroll.com/jquery/range/event-hooks.md) - Attach custom logic to the JQuery date range picker using lifecycle event hooks — onChange, onSet, and onInit fire on user interaction.
- Next: [Localization](https://demo.mobiscroll.com/jquery/range/localization.md) - Localize the JQuery date range picker — set date and time formats, button labels, RTL support, and 37 languages, with overridable settings.