@rushdi94/hijri-datepicker 1.0.1 → 2.0.0

package/dist/hijri-datepicker.umd.js

@@ -11,8 +11,13 @@
         'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان',
         'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة',
     ];
-    // Sunday → Saturday in Arabic
+    const GREGORIAN_MONTHS_EN = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December',
+    ];
+    // Sunday → Saturday
     const WEEKDAY_AR = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
+    const WEEKDAY_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     // ── calendar arithmetic ──────────────────────────────────────────────────────
     function gToJDN(y, m, d) {
         const a = Math.floor((14 - m) / 12);
@@ -63,7 +68,7 @@
         const year = 30 * n + j - 30;
         return [year, month, day];
     }
-    // ── public helpers ───────────────────────────────────────────────────────────
+    // ── Hijri helpers ─────────────────────────────────────────────────────────────
     function toHijri(date) {
         const [year, month, day] = jdnToH(gToJDN(date.getFullYear(), date.getMonth() + 1, date.getDate()));
         return { year, month, day };
@@ -78,7 +83,7 @@
         return hToJDN(ny, nm, 1) - hToJDN(year, month, 1);
     }
     function firstWeekday(year, month) {
-        return toGregorian(year, month, 1).getDay(); // 0 = Sunday
+        return toGregorian(year, month, 1).getDay();
     }
     function todayHijri() {
         return toHijri(new Date());
@@ -108,79 +113,80 @@
             return null;
         }
     }
+    // ── Gregorian helpers ─────────────────────────────────────────────────────────
+    function daysInMonthGregorian(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    function firstWeekdayGregorian(year, month) {
+        return new Date(year, month - 1, 1).getDay();
+    }
+    function todayGregorian() {
+        const d = new Date();
+        return { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() };
+    }
+    function formatGregorian(g, fmt = 'DD/MM/YYYY') {
+        return fmt
+            .replace('YYYY', String(g.year))
+            .replace('MM', String(g.month).padStart(2, '0'))
+            .replace('DD', String(g.day).padStart(2, '0'))
+            .replace('M', String(g.month))
+            .replace('D', String(g.day));
+    }
 
     const CSS = /* css */ `
 /* ── HijriDatePicker ─────────────────────────────────────────────────────── */
-.hdp,
-.hdp *,
-.hdp *::before,
-.hdp *::after {
+.hdp, .hdp *, .hdp *::before, .hdp *::after {
   box-sizing: border-box;
   font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
-/* wrapper */
 .hdp-wrapper { position: relative; display: inline-block; }
 
-/* input */
+/* ── input ───────────────────────────────────────────────────────────────── */
 .hdp-input-wrap { position: relative; display: block; }
 .hdp-input {
-  width: 100%;
-  padding: 9px 14px 9px 38px;
-  border: 1.5px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 14px;
-  cursor: pointer;
-  background: #fff;
-  outline: none;
-  color: #333;
-  min-width: 210px;
+  width: 100%; padding: 9px 14px 9px 38px;
+  border: 1.5px solid #d1d5db; border-radius: 8px;
+  font-size: 14px; cursor: pointer; background: #fff;
+  outline: none; color: #333; min-width: 210px;
   transition: border-color .2s, box-shadow .2s;
-  caret-color: transparent;
-  text-align: inherit;
+  caret-color: transparent; text-align: inherit;
 }
 [dir="rtl"] .hdp-input { padding: 9px 14px 9px 38px; text-align: right; }
 [dir="ltr"] .hdp-input { padding: 9px 38px 9px 14px; text-align: left; }
 .hdp-input::placeholder { color: #aaa; }
-.hdp-input:focus,
-.hdp-input.open {
+.hdp-input:focus, .hdp-input.open {
   border-color: var(--hdp-primary, #8b1a2e);
   box-shadow: 0 0 0 3px rgba(139,26,46,.14);
 }
 .hdp-input-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: #9ca3af;
-  width: 18px;
-  height: 18px;
+  position: absolute; top: 50%; transform: translateY(-50%);
+  pointer-events: none; color: #9ca3af; width: 18px; height: 18px;
 }
 [dir="rtl"] .hdp-input-icon { left: 10px; right: auto; }
 [dir="ltr"] .hdp-input-icon { right: 10px; left: auto; }
 
 /* ── popup ───────────────────────────────────────────────────────────────── */
 .hdp-popup {
-  position: absolute;
-  top: calc(100% + 6px);
-  z-index: 99999;
-}
-[dir="rtl"] .hdp-popup { right: 0; left: auto; }
-[dir="ltr"] .hdp-popup { left: 0; right: auto; }
-.hdp-popup {
-  width: 312px;
-  border-radius: 12px;
-  overflow: visible;
+  position: absolute; top: calc(100% + 8px); z-index: 99999;
+  width: 312px; border-radius: 12px; overflow: visible;
   box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
   background: var(--hdp-body-bg, #fff);
   animation: _hdpIn .15s cubic-bezier(.2,.8,.4,1);
 }
+[dir="rtl"] .hdp-popup { right: 0; left: auto; }
+[dir="ltr"] .hdp-popup { left: 0; right: auto; }
+@keyframes _hdpIn {
+  from { opacity: 0; transform: translateY(-8px) scale(.97); }
+  to   { opacity: 1; transform: translateY(0)   scale(1);   }
+}
+.hdp-popup.hdp-inline {
+  position: static; box-shadow: 0 2px 16px rgba(0,0,0,.1); animation: none;
+}
 
-/* upward-pointing caret connecting popup to the input */
+/* caret pointing up to input */
 .hdp-popup:not(.hdp-inline)::before {
-  content: '';
-  position: absolute;
-  top: -8px;
+  content: ''; position: absolute; top: -8px;
   width: 0; height: 0;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
@@ -189,192 +195,158 @@
 }
 [dir="rtl"] .hdp-popup:not(.hdp-inline)::before { right: 18px; left: auto; }
 [dir="ltr"] .hdp-popup:not(.hdp-inline)::before { left: 18px; right: auto; }
-@keyframes _hdpIn {
-  from { opacity: 0; transform: translateY(-8px) scale(.97); }
-  to   { opacity: 1; transform: translateY(0)  scale(1);    }
-}
-.hdp-popup.hdp-inline {
-  position: static;
-  box-shadow: 0 2px 16px rgba(0,0,0,.1);
-  animation: none;
-}
 
 /* ── header ──────────────────────────────────────────────────────────────── */
 .hdp-header {
   background: var(--hdp-primary, #8b1a2e);
   color: var(--hdp-on-primary, #fff);
-  display: flex;
-  flex-direction: row;        /* always LTR regardless of dir attribute */
-  align-items: stretch;
-  height: 44px;
+  border-radius: 12px 12px 0 0;
+  display: flex; flex-direction: row;
+  align-items: stretch; height: 44px;
   user-select: none;
 }
 
-/* prev / next month arrows */
 .hdp-nav {
-  flex-shrink: 0;
-  width: 36px;
-  border: none;
-  background: transparent;
-  color: var(--hdp-on-primary, #fff);
-  cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 18px;
-  transition: background .15s;
-  line-height: 1;
+  flex-shrink: 0; width: 32px; border: none;
+  background: transparent; color: var(--hdp-on-primary, #fff);
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  font-size: 18px; transition: background .15s; line-height: 1;
 }
 .hdp-nav:hover { background: rgba(255,255,255,.18); }
 
-/* ── month half (left 50%) ───────────────────────────────────────────────── */
+/* month half */
 .hdp-month-half {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-right: 1px solid rgba(255,255,255,.2);
-  padding: 0 4px;
-  min-width: 0;
+  flex: 1; display: flex; align-items: center; justify-content: center;
+  border-right: 1px solid rgba(255,255,255,.2); padding: 0 4px; min-width: 0;
 }
-
 .hdp-month-select {
-  width: 100%;
-  appearance: none;
-  -webkit-appearance: none;
+  width: 100%; appearance: none; -webkit-appearance: none;
   background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
-  border: none;
-  padding: 6px 26px 6px 10px;
-  font-size: 14px; font-weight: 700;
-  color: var(--hdp-on-primary, #fff);
-  cursor: pointer;
-  outline: none;
-  text-align: center;
-  text-align-last: center;
-  letter-spacing: .2px;
-}
-[dir="rtl"] .hdp-month-select {
-  background-position: left 8px center;
-  padding: 6px 10px 6px 26px;
+  border: none; padding: 6px 26px 6px 10px;
+  font-size: 13px; font-weight: 700; color: var(--hdp-on-primary, #fff);
+  cursor: pointer; outline: none; text-align: center; text-align-last: center;
 }
+[dir="rtl"] .hdp-month-select { background-position: left 8px center; padding: 6px 10px 6px 26px; }
 .hdp-month-select:hover { background-color: rgba(255,255,255,.12); border-radius: 6px; }
 .hdp-month-select option { background: #fff; color: #111; font-weight: 600; }
 
-/* ── year half (right 50%) ───────────────────────────────────────────────── */
+/* year half */
 .hdp-year-half {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-  min-width: 0;
+  flex: 1; display: flex; align-items: center; justify-content: center;
+  padding: 0 6px; min-width: 0;
 }
-
-/* inner wrapper: year number + arrows in a row */
-.hdp-year-inner {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-}
-
+.hdp-year-inner { display: flex; align-items: center; gap: 3px; }
 .hdp-year-display {
-  font-size: 15px; font-weight: 800;
-  color: var(--hdp-on-primary, #fff);
-  letter-spacing: .4px;
-  line-height: 1;
-  white-space: nowrap;
+  font-size: 15px; font-weight: 800; color: var(--hdp-on-primary, #fff);
+  letter-spacing: .4px; line-height: 1; white-space: nowrap;
 }
-
-/* arrows: collapsed (width 0) when not hovered, slide in on hover */
 .hdp-year-arrows {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-width: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
+  display: flex; flex-direction: column; gap: 2px;
+  max-width: 0; overflow: hidden; opacity: 0; pointer-events: none;
   transition: max-width .18s ease, opacity .18s ease;
 }
-.hdp-year-half:hover .hdp-year-arrows {
-  max-width: 22px;
-  opacity: 1;
-  pointer-events: auto;
-}
-
+.hdp-year-half:hover .hdp-year-arrows { max-width: 22px; opacity: 1; pointer-events: auto; }
 .hdp-year-arrow {
-  background: none;
-  border: none;
-  color: var(--hdp-on-primary, #fff);
-  cursor: pointer;
-  width: 18px; height: 13px;
+  background: none; border: none; color: var(--hdp-on-primary, #fff);
+  cursor: pointer; width: 18px; height: 13px;
   display: flex; align-items: center; justify-content: center;
-  font-size: 7px;
-  border-radius: 3px;
-  padding: 0;
-  line-height: 1;
-  flex-shrink: 0;
-  transition: background .12s;
+  font-size: 7px; border-radius: 3px; padding: 0; flex-shrink: 0;
+  line-height: 1; transition: background .12s;
 }
 .hdp-year-arrow:hover { background: rgba(255,255,255,.25); }
 
+/* calendar mode toggle */
+.hdp-mode-btn {
+  flex-shrink: 0; background: rgba(255,255,255,.15);
+  border: 1px solid rgba(255,255,255,.3); border-radius: 5px;
+  color: var(--hdp-on-primary, #fff); cursor: pointer;
+  font-size: 11px; font-weight: 800;
+  padding: 0 7px; margin: 8px 6px; height: 28px;
+  transition: background .15s; line-height: 1; white-space: nowrap;
+}
+.hdp-mode-btn:hover { background: rgba(255,255,255,.3); }
+
 /* ── weekday row ─────────────────────────────────────────────────────────── */
 .hdp-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  background: var(--hdp-primary, #8b1a2e);
-  padding: 0 10px 10px;
+  display: grid; grid-template-columns: repeat(7, 1fr);
+  background: var(--hdp-primary, #8b1a2e); padding: 0 10px 10px;
 }
 .hdp-wday {
-  text-align: center;
-  font-size: 11.5px;
-  color: var(--hdp-on-primary, #fff);
-  opacity: .82;
-  font-weight: 500;
-  padding: 3px 0;
+  text-align: center; font-size: 11.5px; color: var(--hdp-on-primary, #fff);
+  opacity: .82; font-weight: 500; padding: 3px 0;
 }
 
 /* ── days ────────────────────────────────────────────────────────────────── */
 .hdp-days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  padding: 8px 8px 12px;
-  gap: 2px;
-  border-radius: 0 0 12px 12px;
+  display: grid; grid-template-columns: repeat(7, 1fr);
+  padding: 8px 8px 12px; gap: 2px;
   background: var(--hdp-body-bg, #fff);
 }
 .hdp-day {
-  aspect-ratio: 1;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: 50%;
-  font-size: 13.5px;
-  cursor: pointer;
+  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
+  border-radius: 50%; font-size: 13.5px; cursor: pointer;
   color: var(--hdp-day-color, #1f2937);
   transition: background .12s, color .12s, transform .08s;
-  font-weight: 400;
-  border: 2px solid transparent;
-}
-.hdp-day:not(.hdp-empty):hover {
-  background: var(--hdp-hover-bg, rgba(139,26,46,.1));
-  transform: scale(1.08);
+  font-weight: 400; border: 2px solid transparent;
 }
+.hdp-day:not(.hdp-empty):hover { background: var(--hdp-hover-bg); transform: scale(1.08); }
 .hdp-day.hdp-today:not(.hdp-selected) {
-  border-color: var(--hdp-primary, #8b1a2e);
-  color: var(--hdp-primary, #8b1a2e);
-  font-weight: 700;
+  border-color: var(--hdp-primary, #8b1a2e); color: var(--hdp-primary, #8b1a2e); font-weight: 700;
 }
 .hdp-day.hdp-selected {
   background: var(--hdp-primary, #8b1a2e) !important;
   color: var(--hdp-on-primary, #fff) !important;
-  font-weight: 700;
-  border-color: transparent !important;
-  transform: scale(1.1);
+  font-weight: 700; border-color: transparent !important; transform: scale(1.1);
 }
-.hdp-day.hdp-empty {
-  cursor: default;
-  pointer-events: none;
+.hdp-day.hdp-empty { cursor: default; pointer-events: none; }
+
+/* ── time section ────────────────────────────────────────────────────────── */
+.hdp-time-section {
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 10px 16px 14px;
+  border-top: 1px solid #f0f0f0;
+  background: #f9fafb;
+  border-radius: 0 0 12px 12px;
+}
+
+.hdp-spinner {
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+}
+.hdp-spinner-btn {
+  background: none; border: none; color: #999; cursor: pointer;
+  width: 38px; height: 18px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 8px; border-radius: 4px; padding: 0; line-height: 1;
+  transition: background .12s, color .12s;
 }
+.hdp-spinner-btn:hover { background: var(--hdp-hover-bg); color: var(--hdp-primary, #8b1a2e); }
+.hdp-spinner-val {
+  font-size: 26px; font-weight: 700;
+  color: var(--hdp-day-color, #1f2937);
+  min-width: 38px; text-align: center; line-height: 1;
+}
+
+.hdp-time-colon {
+  font-size: 24px; font-weight: 700;
+  color: var(--hdp-day-color, #1f2937);
+  margin-top: 18px; line-height: 1;
+}
+
+.hdp-ampm {
+  display: flex; flex-direction: column; gap: 4px; margin-top: 18px;
+}
+.hdp-ampm-btn {
+  background: #e5e7eb; border: none; border-radius: 6px;
+  padding: 5px 10px; font-size: 11px; font-weight: 700;
+  color: #555; cursor: pointer; transition: background .12s, color .12s;
+}
+.hdp-ampm-btn.hdp-ampm-active {
+  background: var(--hdp-primary, #8b1a2e); color: var(--hdp-on-primary, #fff);
+}
+.hdp-ampm-btn:not(.hdp-ampm-active):hover { background: #d1d5db; }
 `;
 
-    // ── style injection (once per page) ─────────────────────────────────────────
+    // ── style injection ───────────────────────────────────────────────────────────
     let _stylesInjected = false;
     function ensureStyles() {
         if (_stylesInjected || typeof document === 'undefined')
@@ -385,14 +357,16 @@
         el.textContent = CSS;
         document.head.appendChild(el);
     }
-    // ── component ────────────────────────────────────────────────────────────────
+    // ── defaults ──────────────────────────────────────────────────────────────────
     const DEFAULT_WEEKDAYS_AR = [...WEEKDAY_AR];
     const DEFAULT_WEEKDAYS_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    // ── component ─────────────────────────────────────────────────────────────────
     class HijriDatePicker {
         // ── constructor ────────────────────────────────────────────────────────────
         constructor(options) {
             var _a;
-            this.selected = null;
+            this.selectedHijri = null;
+            this.selectedGregorian = null;
             // ── event handlers ─────────────────────────────────────────────────────────
             this._onDocClick = (e) => {
                 if (!this.root.contains(e.target))
@@ -409,15 +383,19 @@
             const defaults = {
                 inline: false,
                 dir,
-                placeholder: dir === 'rtl' ? 'اختر تاريخاً هجرياً' : 'Select Hijri date',
+                placeholder: dir === 'rtl' ? 'اختر تاريخاً هجرياً' : 'Select date',
                 weekdayLabels: dir === 'rtl' ? DEFAULT_WEEKDAYS_AR : DEFAULT_WEEKDAYS_EN,
                 monthLabels: [...HIJRI_MONTHS_AR],
+                gregorianMonthLabels: [...GREGORIAN_MONTHS_EN],
                 primaryColor: '#8b1a2e',
                 onPrimaryColor: '#ffffff',
                 bodyBg: '#ffffff',
                 dayColor: '#1f2937',
                 format: 'DD/MM/YYYY',
                 initialDate: today,
+                initialMode: 'hijri',
+                showTime: false,
+                use24h: false,
                 editable: false,
                 container: options.container,
                 onSelect: () => undefined,
@@ -426,8 +404,19 @@
             };
             this.opts = { ...defaults, ...options, dir };
             this.isRTL = this.opts.dir === 'rtl';
-            this.viewYear = this.opts.initialDate.year;
-            this.viewMonth = this.opts.initialDate.month;
+            this.calMode = this.opts.initialMode;
+            if (this.calMode === 'hijri') {
+                this.viewYear = this.opts.initialDate.year;
+                this.viewMonth = this.opts.initialDate.month;
+            }
+            else {
+                const g = todayGregorian();
+                this.viewYear = g.year;
+                this.viewMonth = g.month;
+            }
+            this.hour = this.opts.use24h ? 0 : 12;
+            this.minute = 0;
+            this.ampm = 'AM';
             ensureStyles();
             this._mount();
         }
@@ -477,8 +466,13 @@
             if (this.opts.editable) {
                 this.inputEl.addEventListener('input', () => {
                     const parsed = parseHijri(this.inputEl.value, this.opts.format);
-                    if (parsed)
-                        this._applySelection(parsed, false);
+                    if (parsed) {
+                        const gDate = toGregorian(parsed.year, parsed.month, parsed.day);
+                        const gregorian = {
+                            year: gDate.getFullYear(), month: gDate.getMonth() + 1, day: gDate.getDate(),
+                        };
+                        this._applySelection(parsed, gregorian, false);
+                    }
                 });
             }
             const icon = document.createElement('span');
@@ -504,38 +498,34 @@
                 popup.style.left = '0';
             }
             popup.setAttribute('role', 'dialog');
-            popup.setAttribute('aria-label', this.isRTL ? 'منتقي التاريخ الهجري' : 'Hijri Date Picker');
+            popup.setAttribute('aria-label', this.isRTL ? 'منتقي التاريخ' : 'Date Picker');
             popup.appendChild(this._buildHeader());
             popup.appendChild(this._buildWeekdays());
             this.daysGrid = this._buildDaysGrid();
             popup.appendChild(this.daysGrid);
+            if (this.opts.showTime) {
+                popup.appendChild(this._buildTimeSection());
+            }
             return popup;
         }
         // ── header ─────────────────────────────────────────────────────────────────
         _buildHeader() {
             const hdr = document.createElement('div');
             hdr.className = 'hdp-header';
-            // ── Month half (left) ─────────────────────────────────────────
+            // Month half (left)
             const monthHalf = document.createElement('div');
             monthHalf.className = 'hdp-month-half';
             this.monthSelectEl = document.createElement('select');
             this.monthSelectEl.className = 'hdp-month-select';
-            this.monthSelectEl.setAttribute('aria-label', this.isRTL ? 'الشهر' : 'Month');
-            this.opts.monthLabels.forEach((name, i) => {
-                const opt = document.createElement('option');
-                opt.value = String(i + 1);
-                opt.textContent = name;
-                this.monthSelectEl.appendChild(opt);
-            });
+            this._rebuildMonthOptions();
             this.monthSelectEl.addEventListener('change', () => {
                 this.viewMonth = Number(this.monthSelectEl.value);
                 this._renderDays();
             });
             monthHalf.appendChild(this.monthSelectEl);
-            // ── Year half (right) ─────────────────────────────────────────
+            // Year half (right)
             const yearHalf = document.createElement('div');
             yearHalf.className = 'hdp-year-half';
-            // Inner group: year number + arrows side by side
             const yearInner = document.createElement('div');
             yearInner.className = 'hdp-year-inner';
             this.yearDisplayEl = document.createElement('span');
@@ -545,31 +535,25 @@
             const yearUp = document.createElement('button');
             yearUp.className = 'hdp-year-arrow';
             yearUp.innerHTML = '▲';
-            yearUp.setAttribute('aria-label', this.isRTL ? 'السنة التالية' : 'Next year');
-            yearUp.addEventListener('click', () => {
-                this.viewYear++;
-                this._syncHeader();
-                this._renderDays();
-            });
+            yearUp.addEventListener('click', () => { this.viewYear++; this._syncHeader(); this._renderDays(); });
             const yearDown = document.createElement('button');
             yearDown.className = 'hdp-year-arrow';
             yearDown.innerHTML = '▼';
-            yearDown.setAttribute('aria-label', this.isRTL ? 'السنة السابقة' : 'Previous year');
-            yearDown.addEventListener('click', () => {
-                this.viewYear--;
-                this._syncHeader();
-                this._renderDays();
-            });
+            yearDown.addEventListener('click', () => { this.viewYear--; this._syncHeader(); this._renderDays(); });
             yearArrows.appendChild(yearUp);
             yearArrows.appendChild(yearDown);
             yearInner.appendChild(this.yearDisplayEl);
             yearInner.appendChild(yearArrows);
             yearHalf.appendChild(yearInner);
-            // ── Assemble: [‹] [month | year] [›]  (always LTR order) ─────
+            // Calendar mode toggle button
+            this.modeBtnEl = document.createElement('button');
+            this.modeBtnEl.className = 'hdp-mode-btn';
+            this.modeBtnEl.addEventListener('click', () => this._switchMode());
             hdr.appendChild(this._navBtn('‹', -1));
             hdr.appendChild(monthHalf);
             hdr.appendChild(yearHalf);
             hdr.appendChild(this._navBtn('›', 1));
+            hdr.appendChild(this.modeBtnEl);
             this._syncHeader();
             return hdr;
         }
@@ -577,13 +561,45 @@
             const btn = document.createElement('button');
             btn.className = 'hdp-nav';
             btn.innerHTML = symbol;
-            btn.setAttribute('aria-label', delta > 0 ? 'الشهر التالي' : 'الشهر السابق');
+            btn.setAttribute('aria-label', delta > 0 ? 'Next month' : 'Previous month');
             btn.addEventListener('click', () => this._navigate(delta));
             return btn;
         }
         _syncHeader() {
             this.monthSelectEl.value = String(this.viewMonth);
             this.yearDisplayEl.textContent = String(this.viewYear);
+            this.modeBtnEl.textContent = this.calMode === 'hijri' ? 'G' : 'ه';
+            this.modeBtnEl.title = this.calMode === 'hijri' ? 'Switch to Gregorian' : 'Switch to Hijri';
+        }
+        _rebuildMonthOptions() {
+            const labels = this.calMode === 'hijri'
+                ? this.opts.monthLabels
+                : this.opts.gregorianMonthLabels;
+            this.monthSelectEl.innerHTML = '';
+            labels.forEach((name, i) => {
+                const opt = document.createElement('option');
+                opt.value = String(i + 1);
+                opt.textContent = name;
+                this.monthSelectEl.appendChild(opt);
+            });
+            this.monthSelectEl.value = String(this.viewMonth);
+        }
+        _switchMode() {
+            if (this.calMode === 'hijri') {
+                const gDate = toGregorian(this.viewYear, this.viewMonth, 1);
+                this.viewYear = gDate.getFullYear();
+                this.viewMonth = gDate.getMonth() + 1;
+                this.calMode = 'gregorian';
+            }
+            else {
+                const h = toHijri(new Date(this.viewYear, this.viewMonth - 1, 1));
+                this.viewYear = h.year;
+                this.viewMonth = h.month;
+                this.calMode = 'hijri';
+            }
+            this._rebuildMonthOptions();
+            this._syncHeader();
+            this._renderDays();
         }
         // ── weekdays ───────────────────────────────────────────────────────────────
         _buildWeekdays() {
@@ -607,9 +623,15 @@
         _renderDays(grid) {
             const g = grid !== null && grid !== void 0 ? grid : this.daysGrid;
             g.innerHTML = '';
-            const today = todayHijri();
-            const total = daysInMonth(this.viewYear, this.viewMonth);
-            const start = firstWeekday(this.viewYear, this.viewMonth);
+            const isHijri = this.calMode === 'hijri';
+            const todayH = todayHijri();
+            const todayG = todayGregorian();
+            const total = isHijri
+                ? daysInMonth(this.viewYear, this.viewMonth)
+                : daysInMonthGregorian(this.viewYear, this.viewMonth);
+            const start = isHijri
+                ? firstWeekday(this.viewYear, this.viewMonth)
+                : firstWeekdayGregorian(this.viewYear, this.viewMonth);
             for (let i = 0; i < start; i++) {
                 const blank = document.createElement('div');
                 blank.className = 'hdp-day hdp-empty';
@@ -621,12 +643,14 @@
                 cell.textContent = String(d);
                 cell.setAttribute('role', 'button');
                 cell.setAttribute('tabindex', '0');
-                cell.setAttribute('aria-label', `${d} ${this.opts.monthLabels[this.viewMonth - 1]} ${this.viewYear}`);
-                const isToday = d === today.day && this.viewMonth === today.month && this.viewYear === today.year;
-                const isSel = this.selected !== null &&
-                    d === this.selected.day &&
-                    this.viewMonth === this.selected.month &&
-                    this.viewYear === this.selected.year;
+                const isToday = isHijri
+                    ? (d === todayH.day && this.viewMonth === todayH.month && this.viewYear === todayH.year)
+                    : (d === todayG.day && this.viewMonth === todayG.month && this.viewYear === todayG.year);
+                const isSel = isHijri
+                    ? (this.selectedHijri !== null && d === this.selectedHijri.day &&
+                        this.viewMonth === this.selectedHijri.month && this.viewYear === this.selectedHijri.year)
+                    : (this.selectedGregorian !== null && d === this.selectedGregorian.day &&
+                        this.viewMonth === this.selectedGregorian.month && this.viewYear === this.selectedGregorian.year);
                 if (isToday)
                     cell.classList.add('hdp-today');
                 if (isSel)
@@ -641,6 +665,78 @@
                 g.appendChild(cell);
             }
         }
+        // ── time section ───────────────────────────────────────────────────────────
+        _buildTimeSection() {
+            const section = document.createElement('div');
+            section.className = 'hdp-time-section';
+            const { el: hourEl, display: hourDisp } = this._buildSpinner(() => {
+                this.hour = this.opts.use24h ? (this.hour + 1) % 24 : (this.hour === 12 ? 1 : this.hour + 1);
+                this._syncTime();
+            }, () => {
+                this.hour = this.opts.use24h ? (this.hour - 1 + 24) % 24 : (this.hour === 1 ? 12 : this.hour - 1);
+                this._syncTime();
+            });
+            this.hourDisplayEl = hourDisp;
+            const colon = document.createElement('span');
+            colon.className = 'hdp-time-colon';
+            colon.textContent = ':';
+            const { el: minEl, display: minDisp } = this._buildSpinner(() => { this.minute = (this.minute + 1) % 60; this._syncTime(); }, () => { this.minute = (this.minute - 1 + 60) % 60; this._syncTime(); });
+            this.minuteDisplayEl = minDisp;
+            section.appendChild(hourEl);
+            section.appendChild(colon);
+            section.appendChild(minEl);
+            if (!this.opts.use24h) {
+                const ampm = document.createElement('div');
+                ampm.className = 'hdp-ampm';
+                const amBtn = document.createElement('button');
+                amBtn.className = 'hdp-ampm-btn';
+                amBtn.textContent = 'AM';
+                amBtn.addEventListener('click', () => { this.ampm = 'AM'; this._syncTime(); });
+                const pmBtn = document.createElement('button');
+                pmBtn.className = 'hdp-ampm-btn';
+                pmBtn.textContent = 'PM';
+                pmBtn.addEventListener('click', () => { this.ampm = 'PM'; this._syncTime(); });
+                ampm.appendChild(amBtn);
+                ampm.appendChild(pmBtn);
+                this.ampmContainerEl = ampm;
+                section.appendChild(ampm);
+            }
+            this._syncTime();
+            return section;
+        }
+        _buildSpinner(onUp, onDown) {
+            const el = document.createElement('div');
+            el.className = 'hdp-spinner';
+            const upBtn = document.createElement('button');
+            upBtn.className = 'hdp-spinner-btn';
+            upBtn.innerHTML = '▲';
+            upBtn.addEventListener('click', onUp);
+            const display = document.createElement('span');
+            display.className = 'hdp-spinner-val';
+            const downBtn = document.createElement('button');
+            downBtn.className = 'hdp-spinner-btn';
+            downBtn.innerHTML = '▼';
+            downBtn.addEventListener('click', onDown);
+            el.appendChild(upBtn);
+            el.appendChild(display);
+            el.appendChild(downBtn);
+            return { el, display };
+        }
+        _syncTime() {
+            this.hourDisplayEl.textContent = String(this.hour).padStart(2, '0');
+            this.minuteDisplayEl.textContent = String(this.minute).padStart(2, '0');
+            if (!this.opts.use24h && this.ampmContainerEl) {
+                const btns = this.ampmContainerEl.querySelectorAll('.hdp-ampm-btn');
+                btns[0].classList.toggle('hdp-ampm-active', this.ampm === 'AM');
+                btns[1].classList.toggle('hdp-ampm-active', this.ampm === 'PM');
+            }
+            if (this.selectedHijri && this.selectedGregorian) {
+                const fmt = this._buildFormatted(this.selectedHijri, this.selectedGregorian);
+                if (this.inputEl)
+                    this.inputEl.value = fmt;
+                this.opts.onSelect({ hijri: this.selectedHijri, gregorian: this.selectedGregorian, time: { hour: this.hour, minute: this.minute, ampm: this.ampm } }, fmt);
+            }
+        }
         // ── navigation ─────────────────────────────────────────────────────────────
         _navigate(delta) {
             this.viewMonth += delta;
@@ -657,21 +753,44 @@
         }
         // ── selection ──────────────────────────────────────────────────────────────
         _pickDay(day) {
-            this._applySelection({ year: this.viewYear, month: this.viewMonth, day }, true);
+            let hijri;
+            let gregorian;
+            if (this.calMode === 'hijri') {
+                hijri = { year: this.viewYear, month: this.viewMonth, day };
+                const gDate = toGregorian(hijri.year, hijri.month, hijri.day);
+                gregorian = { year: gDate.getFullYear(), month: gDate.getMonth() + 1, day: gDate.getDate() };
+            }
+            else {
+                gregorian = { year: this.viewYear, month: this.viewMonth, day };
+                hijri = toHijri(new Date(gregorian.year, gregorian.month - 1, gregorian.day));
+            }
+            this._applySelection(hijri, gregorian, true);
         }
-        _applySelection(date, closeAfter) {
-            this.selected = { ...date };
-            this.viewYear = date.year;
-            this.viewMonth = date.month;
-            const fmt = formatHijri(date, this.opts.format);
+        _applySelection(hijri, gregorian, closeAfter) {
+            this.selectedHijri = { ...hijri };
+            this.selectedGregorian = { ...gregorian };
+            this.viewYear = this.calMode === 'hijri' ? hijri.year : gregorian.year;
+            this.viewMonth = this.calMode === 'hijri' ? hijri.month : gregorian.month;
+            const fmt = this._buildFormatted(hijri, gregorian);
             if (this.inputEl)
                 this.inputEl.value = fmt;
             this._syncHeader();
             this._renderDays();
-            this.opts.onSelect(date, fmt);
-            if (closeAfter && !this.opts.inline)
+            this.opts.onSelect({ hijri, gregorian, time: this.opts.showTime ? { hour: this.hour, minute: this.minute, ampm: this.ampm } : null }, fmt);
+            if (closeAfter && !this.opts.inline && !this.opts.showTime)
                 this._close();
         }
+        _buildFormatted(hijri, gregorian) {
+            const dateStr = this.calMode === 'hijri'
+                ? formatHijri(hijri, this.opts.format)
+                : formatGregorian(gregorian, this.opts.format);
+            if (!this.opts.showTime)
+                return dateStr;
+            const hh = String(this.hour).padStart(2, '0');
+            const mm = String(this.minute).padStart(2, '0');
+            const timeStr = this.opts.use24h ? ` ${hh}:${mm}` : ` ${hh}:${mm} ${this.ampm}`;
+            return dateStr + timeStr;
+        }
         // ── open / close ───────────────────────────────────────────────────────────
         _open() {
             var _a;
@@ -690,17 +809,62 @@
             this.opts.onClose();
         }
         // ── public API ─────────────────────────────────────────────────────────────
-        /** Get the currently selected Hijri date (or null) */
+        /** Get the currently selected date/time value */
         getValue() {
-            return this.selected ? { ...this.selected } : null;
+            if (!this.selectedHijri || !this.selectedGregorian)
+                return null;
+            return {
+                hijri: { ...this.selectedHijri },
+                gregorian: { ...this.selectedGregorian },
+                time: this.opts.showTime ? { hour: this.hour, minute: this.minute, ampm: this.ampm } : null,
+            };
         }
-        /** Programmatically select a date */
+        /** Set a Hijri date programmatically */
         setValue(date) {
-            this._applySelection(date, false);
+            const gDate = toGregorian(date.year, date.month, date.day);
+            const gregorian = {
+                year: gDate.getFullYear(), month: gDate.getMonth() + 1, day: gDate.getDate(),
+            };
+            if (this.calMode === 'hijri') {
+                this.viewYear = date.year;
+                this.viewMonth = date.month;
+            }
+            else {
+                this.viewYear = gregorian.year;
+                this.viewMonth = gregorian.month;
+            }
+            this._applySelection(date, gregorian, false);
+        }
+        /** Set a Gregorian date programmatically */
+        setValueGregorian(date) {
+            const hijri = toHijri(new Date(date.year, date.month - 1, date.day));
+            if (this.calMode === 'gregorian') {
+                this.viewYear = date.year;
+                this.viewMonth = date.month;
+            }
+            else {
+                this.viewYear = hijri.year;
+                this.viewMonth = hijri.month;
+            }
+            this._applySelection(hijri, date, false);
+        }
+        /** Set the time programmatically */
+        setTime(hour, minute, ampm = 'AM') {
+            this.hour = hour;
+            this.minute = minute;
+            this.ampm = ampm;
+            if (this.opts.showTime)
+                this._syncTime();
+        }
+        /** Switch calendar display mode */
+        setMode(mode) {
+            if (this.calMode !== mode)
+                this._switchMode();
         }
         /** Clear the selected date */
         clear() {
-            this.selected = null;
+            this.selectedHijri = null;
+            this.selectedGregorian = null;
             if (this.inputEl)
                 this.inputEl.value = '';
             this._renderDays();
@@ -718,14 +882,8 @@
             this._applyVars(this.root);
             this._renderDays();
         }
-        /** Open the picker programmatically */
-        open() {
-            this._open();
-        }
-        /** Close the picker programmatically */
-        close() {
-            this._close();
-        }
+        open() { this._open(); }
+        close() { this._close(); }
         /** Remove the picker from the DOM and clean up listeners */
         destroy() {
             document.removeEventListener('click', this._onDocClick, true);
@@ -734,15 +892,21 @@
         }
     }
 
+    exports.GREGORIAN_MONTHS_EN = GREGORIAN_MONTHS_EN;
     exports.HIJRI_MONTHS_AR = HIJRI_MONTHS_AR;
     exports.HijriDatePicker = HijriDatePicker;
     exports.WEEKDAY_AR = WEEKDAY_AR;
+    exports.WEEKDAY_EN = WEEKDAY_EN;
     exports.daysInMonth = daysInMonth;
+    exports.daysInMonthGregorian = daysInMonthGregorian;
     exports.firstWeekday = firstWeekday;
+    exports.firstWeekdayGregorian = firstWeekdayGregorian;
+    exports.formatGregorian = formatGregorian;
     exports.formatHijri = formatHijri;
     exports.parseHijri = parseHijri;
     exports.toGregorian = toGregorian;
     exports.toHijri = toHijri;
+    exports.todayGregorian = todayGregorian;
     exports.todayHijri = todayHijri;
 
 }));