Hijri and Arabic

<div class="demo">
  <div class="demo-field" dir="rtl" lang="ar-SA">
    <label class="demo-label" for="hijri">تاريخ الموعد</label>
    <input id="hijri" name="appointment" class="demo-input">
  </div>
  <div class="demo-field">
    <label class="demo-label" for="dual">Gregorian with Hijri days</label>
    <input id="dual" name="event" class="demo-input">
  </div>
  <p class="demo-hint">Both post a Gregorian ISO date: <code id="out">—</code></p>
</div>

import { createDatePicker } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/index.js';
import { registerAll } from 'https://devix.pk/cdn/oss/date-picker@1.2.0/locales.js';

// Every language the package ships, taught to the picker in one line. Without
// it the grid would be Arabic and the buttons under it English.
registerAll();

const out = document.getElementById('out');
const onChange = (iso) => (out.textContent = iso ?? '—');

createDatePicker(document.getElementById('hijri'), {
  locale: 'ar-SA',
  calendar: 'islamic-umalqura',
  onChange,
});

createDatePicker(document.getElementById('dual'), {
  locale: 'en-GB',
  secondaryCalendar: 'islamic-umalqura',
  value: '2026-03-20',
  onChange,
});

@import url('https://devix.pk/cdn/oss/date-picker@1.2.0/date-picker.min.css');