@rushdi94/gregorian-hijri-datepicker

A fully customizable Hijri / Gregorian DateTime Picker — no framework required.

• Switchable calendars — toggle between Hijri and Gregorian in one click
• Lock to one calendar — Hijri only or Gregorian only via calendarSupport
• Time picker — hour + minute spinners with AM/PM or 24-hour mode
• Works in React, Angular, Vue, or plain HTML
• Tabular Islamic Calendar algorithm — accurate & offline
• RTL and LTR layout support
• Fully customizable colors via simple options
• TypeScript types included
• Zero runtime dependencies

Live Demo

Installation

npm install @rushdi94/gregorian-hijri-datepicker

Quick Start

<div id="my-picker"></div>

import { GregorianHijriDatePicker } from '@rushdi94/gregorian-hijri-datepicker';

const picker = new GregorianHijriDatePicker({
  container: '#my-picker',
  onSelect(value, formatted) {
    console.log(value.hijri);      // { year: 1447, month: 11, day: 30 }
    console.log(value.gregorian);  // { year: 2026, month: 5, day: 17 }
    console.log(formatted);        // "30/11/1447"
  },
});

calendarSupport — Lock to one calendar

// Hijri + Gregorian toggle (default)
new GregorianHijriDatePicker({ container: '#el', calendarSupport: 'both' });

// Hijri only — mode-switch button hidden, calendar locked
new GregorianHijriDatePicker({ container: '#el', calendarSupport: 'hijri' });

// Gregorian only — mode-switch button hidden, calendar locked
new GregorianHijriDatePicker({ container: '#el', calendarSupport: 'gregorian' });

With Time Picker

new GregorianHijriDatePicker({
  container: '#my-picker',
  showTime: true,      // show hour / minute / AM-PM
  use24h:   false,     // false = AM/PM (default), true = 24-hour
  onSelect(value, formatted) {
    console.log(value.time);   // { hour: 3, minute: 30, ampm: 'PM' }
    console.log(formatted);    // "30/11/1447 03:30 PM"
  },
});

Start in Gregorian Mode

new GregorianHijriDatePicker({
  container: '#my-picker',
  initialMode: 'gregorian',
  onSelect(value, formatted) {
    console.log(formatted);   // "17/05/2026"
  },
});

Custom Colors

new GregorianHijriDatePicker({
  container: '#my-picker',
  primaryColor:   '#1565c0',
  onPrimaryColor: '#ffffff',
  bodyBg:         '#f0f4ff',
  dayColor:       '#1a237e',
  format:         'YYYY/MM/DD',
});

RTL & LTR

// RTL (default — Arabic)
new GregorianHijriDatePicker({ container: '#picker', dir: 'rtl' });

// LTR (English)
new GregorianHijriDatePicker({
  container: '#picker',
  dir: 'ltr',
  primaryColor: '#1565c0',
  weekdayLabels: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
  monthLabels: [
    'Muharram','Safar',"Rabi' I","Rabi' II",
    'Jumada I','Jumada II','Rajab',"Sha'ban",
    'Ramadan','Shawwal',"Dhu al-Qi'dah","Dhu al-Hijjah",
  ],
});

Inline Mode

new GregorianHijriDatePicker({
  container: '#calendar-area',
  inline: true,
  primaryColor: '#2e7d32',
});

Responsive Width

The picker fills any column width — no fixed minimum. Works inside Bootstrap, Tailwind, or any grid:

<div class="col-4">
  <div id="picker"></div>
</div>

new GregorianHijriDatePicker({ container: '#picker' });

All Options

| Option | Type | Default | Description | |---|---|---|---| | container | string \| HTMLElement | required | CSS selector or DOM element | | calendarSupport | 'both' \| 'hijri' \| 'gregorian' | 'both' | Lock picker to one calendar or allow both | | dir | 'rtl' \| 'ltr' | 'rtl' | Layout direction | | inline | boolean | false | Always-visible calendar (no input field) | | initialMode | 'hijri' \| 'gregorian' | 'hijri' | Starting calendar mode | | initialDate | HijriDate | today | Hijri date to open the calendar at | | showTime | boolean | false | Show hour/minute/AM-PM spinner | | use24h | boolean | false | 24-hour mode (no AM/PM) | | showModeSwitch | boolean | true | Show/hide the G/ه toggle button | | placeholder | string | Arabic text | Input placeholder | | format | string | 'DD/MM/YYYY' | Date format — tokens: DD MM YYYY | | editable | boolean | false | Allow typing a date directly in the input | | primaryColor | string | '#8b1a2e' | Header, selected day, today ring color | | onPrimaryColor | string | '#ffffff' | Text color on primary-colored surfaces | | bodyBg | string | '#ffffff' | Calendar body background | | dayColor | string | '#1f2937' | Regular day number color | | weekdayLabels | string[7] | Arabic | Column headers Sun → Sat | | monthLabels | string[12] | Arabic Hijri | Hijri month names | | gregorianMonthLabels | string[12] | English | Gregorian month names | | onSelect | (value, fmt) => void | — | Fired when user picks a date or changes time | | onOpen | () => void | — | Fired when picker opens | | onClose | () => void | — | Fired when picker closes |

Programmatic API

picker.getValue()                                          // → DateTimeValue | null
picker.setValue({ year: 1447, month: 9, day: 1 })         // set by Hijri date
picker.setValueGregorian({ year: 2026, month: 3, day: 1 }) // set by Gregorian date
picker.setTime(3, 30, 'PM')                               // set time
picker.setMode('gregorian')                               // switch calendar mode (no-op if locked)
picker.goTo(1447, 12)                                     // navigate view to year/month
picker.clear()                                            // clear selection
picker.open()  / picker.close()                           // open or close programmatically
picker.setColors({ primaryColor: '#e53935' })             // update colors live
picker.destroy()                                          // remove from DOM + clean up listeners

DateTimeValue shape

interface DateTimeValue {
  hijri:     { year: number; month: number; day: number };
  gregorian: { year: number; month: number; day: number };
  time:      { hour: number; minute: number; ampm: 'AM' | 'PM' } | null;
}

Helper Functions

import {
  toHijri, toGregorian,
  formatHijri, formatGregorian,
  todayHijri, todayGregorian,
  parseHijri,
} from '@rushdi94/gregorian-hijri-datepicker';

toHijri(new Date('2026-05-17'))
// → { year: 1447, month: 11, day: 30 }

toGregorian(1447, 9, 1)
// → Date object (2026-02-28)

formatHijri({ year: 1447, month: 11, day: 30 }, 'YYYY/MM/DD')
// → "1447/11/30"

parseHijri('30/11/1447', 'DD/MM/YYYY')
// → { year: 1447, month: 11, day: 30 }

todayHijri()     // → current Hijri date
todayGregorian() // → current Gregorian date

CDN / Script Tag

<script src="https://unpkg.com/@rushdi94/gregorian-hijri-datepicker/dist/gregorian-hijri.umd.js"></script>
<script>
  const { GregorianHijriDatePicker } = GregorianHijriLib;
  new GregorianHijriDatePicker({ container: '#el' });
</script>

Angular

import { Component, AfterViewInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
import { GregorianHijriDatePicker } from '@rushdi94/gregorian-hijri-datepicker';

@Component({ template: `<div #picker></div>` })
export class MyComponent implements AfterViewInit, OnDestroy {
  @ViewChild('picker') pickerRef!: ElementRef;
  private hdp!: GregorianHijriDatePicker;

  ngAfterViewInit() {
    this.hdp = new GregorianHijriDatePicker({
      container: this.pickerRef.nativeElement,
      showTime: true,
      onSelect: (value, fmt) => console.log(value, fmt),
    });
  }

  ngOnDestroy() { this.hdp.destroy(); }
}

React

import { useEffect, useRef } from 'react';
import { GregorianHijriDatePicker, DateTimeValue } from '@rushdi94/gregorian-hijri-datepicker';

export function HijriPicker({ onSelect }: { onSelect: (d: DateTimeValue) => void }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const picker = new GregorianHijriDatePicker({
      container: ref.current!,
      showTime: true,
      onSelect: (value) => onSelect(value),
    });
    return () => picker.destroy();
  }, []);

  return <div ref={ref} />;
}

Changelog

v1.0.0

• Published as @rushdi94/gregorian-hijri-datepicker
• Added calendarSupport option — lock to Hijri only, Gregorian only, or both
• Added showModeSwitch option — hide the G/ه toggle button independently
• Responsive input width — fills any container column
• Full programmatic API: open(), close(), setMode(), setValueGregorian(), setTime()
• Gregorian calendar mode with toggle
• Time picker — AM/PM and 24-hour
• RTL & LTR layout
• TypeScript types included

License

MIT © Rushdi Eskandar