@rushdi94/hijri-datepicker 1.0.1 → 2.0.0

package/dist/hijri-datepicker.esm.js

@@ -5,8 +5,13 @@ const HIJRI_MONTHS_AR = [
     'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان',
     'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة',
 ];
-// 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);
@@ -57,7 +62,7 @@ function jdnToH(jdn) {
     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 };
@@ -72,7 +77,7 @@ function daysInMonth(year, month) {
     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());
@@ -102,79 +107,80 @@ function parseHijri(value, fmt = 'DD/MM/YYYY') {
         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;
@@ -183,192 +189,158 @@ const CSS = /* css */ `
 }
 [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')
@@ -379,14 +351,16 @@ function ensureStyles() {
     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))
@@ -403,15 +377,19 @@ class HijriDatePicker {
         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,
@@ -420,8 +398,19 @@ class HijriDatePicker {
         };
         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();
     }
@@ -471,8 +460,13 @@ class HijriDatePicker {
         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');
@@ -498,38 +492,34 @@ class HijriDatePicker {
             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');
@@ -539,31 +529,25 @@ class HijriDatePicker {
         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;
     }
@@ -571,13 +555,45 @@ class HijriDatePicker {
         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() {
@@ -601,9 +617,15 @@ class HijriDatePicker {
     _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';
@@ -615,12 +637,14 @@ class HijriDatePicker {
             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)
@@ -635,6 +659,78 @@ class HijriDatePicker {
             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;
@@ -651,21 +747,44 @@ class HijriDatePicker {
     }
     // ── 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;
@@ -684,17 +803,62 @@ class HijriDatePicker {
         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();
@@ -712,14 +876,8 @@ class HijriDatePicker {
         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);
@@ -728,5 +886,5 @@ class HijriDatePicker {
     }
 }
 
-export { HIJRI_MONTHS_AR, HijriDatePicker, WEEKDAY_AR, daysInMonth, firstWeekday, formatHijri, parseHijri, toGregorian, toHijri, todayHijri };
+export { GREGORIAN_MONTHS_EN, HIJRI_MONTHS_AR, HijriDatePicker, WEEKDAY_AR, WEEKDAY_EN, daysInMonth, daysInMonthGregorian, firstWeekday, firstWeekdayGregorian, formatGregorian, formatHijri, parseHijri, toGregorian, toHijri, todayGregorian, todayHijri };
 //# sourceMappingURL=hijri-datepicker.esm.js.map