datex-ui 1.1.8 → 1.1.10

package/dist/index.esm.js

@@ -1,71 +1,77 @@
-function g(r, t) {
-  const e = r.getFullYear(), a = String(r.getMonth() + 1).padStart(2, "0"), i = String(r.getDate()).padStart(2, "0"), s = String(r.getHours()).padStart(2, "0"), n = String(r.getMinutes()).padStart(2, "0"), o = String(r.getSeconds()).padStart(2, "0");
-  return t.replace(/YYYY/g, String(e)).replace(/MM/g, a).replace(/DD/g, i).replace(/HH/g, s).replace(/mm/g, n).replace(/ss/g, o);
+function C(l, t) {
+  const e = l.getFullYear(), a = String(l.getMonth() + 1).padStart(2, "0"), i = String(l.getDate()).padStart(2, "0"), s = String(l.getHours()).padStart(2, "0"), r = String(l.getMinutes()).padStart(2, "0"), n = String(l.getSeconds()).padStart(2, "0");
+  return t.replace(/YYYY/g, String(e)).replace(/MM/g, a).replace(/DD/g, i).replace(/HH/g, s).replace(/mm/g, r).replace(/ss/g, n);
 }
-function h(r, t) {
-  const e = new Date(r);
+function f(l, t) {
+  const e = new Date(l);
   return e.setMonth(e.getMonth() + t), e;
 }
-function v(r) {
-  const t = new Date(r);
+function w(l) {
+  const t = new Date(l);
   return t.setHours(0, 0, 0, 0), t;
 }
-function y(r) {
-  const t = new Date(r);
+function S(l) {
+  const t = new Date(l);
   return t.setHours(23, 59, 59, 999), t;
 }
-function D(r, t) {
-  return r.getTime() > t.getTime();
+function k(l, t) {
+  return l.getTime() > t.getTime();
 }
-function p(r, t) {
-  return r.getTime() < t.getTime();
+function g(l, t) {
+  return l.getTime() < t.getTime();
 }
-function d(r, t, e = "day") {
-  if (!r || !t) return !1;
+function u(l, t, e = "day") {
+  if (!l || !t) return !1;
   switch (e) {
     case "day":
-      return r.getFullYear() === t.getFullYear() && r.getMonth() === t.getMonth() && r.getDate() === t.getDate();
+      return l.getFullYear() === t.getFullYear() && l.getMonth() === t.getMonth() && l.getDate() === t.getDate();
     case "month":
-      return r.getFullYear() === t.getFullYear() && r.getMonth() === t.getMonth();
+      return l.getFullYear() === t.getFullYear() && l.getMonth() === t.getMonth();
     case "year":
-      return r.getFullYear() === t.getFullYear();
+      return l.getFullYear() === t.getFullYear();
     default:
       return !1;
   }
 }
-function f(r) {
-  return r instanceof Date && !isNaN(r.getTime());
+function y(l) {
+  return l instanceof Date && !isNaN(l.getTime());
 }
-function m(r, t) {
-  if (t === "YYYY-MM-DD")
-    return new Date(r);
+function b(l, t) {
+  if (t === "YYYY-MM-DD") {
+    const e = l.split("-");
+    if (e.length === 3) {
+      const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, s = parseInt(e[2], 10);
+      return new Date(a, i, s);
+    }
+    return new Date(l);
+  }
   if (t === "DD/MM/YYYY") {
-    const e = r.split("/");
+    const e = l.split("/");
     if (e.length === 3) {
       const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, s = parseInt(e[2], 10);
       return new Date(s, i, a);
     }
   }
   if (t === "DD/MM/YYYY HH:mm") {
-    const [e, a] = r.split(" "), i = e.split("/"), s = a ? a.split(":") : ["0", "0"];
+    const [e, a] = l.split(" "), i = e.split("/"), s = a ? a.split(":") : ["0", "0"];
     if (i.length === 3) {
-      const n = parseInt(i[0], 10), o = parseInt(i[1], 10) - 1, l = parseInt(i[2], 10), c = parseInt(s[0], 10) || 0, u = parseInt(s[1], 10) || 0;
-      return new Date(l, o, n, c, u);
+      const r = parseInt(i[0], 10), n = parseInt(i[1], 10) - 1, o = parseInt(i[2], 10), c = parseInt(s[0], 10) || 0, d = parseInt(s[1], 10) || 0;
+      return new Date(o, n, r, c, d);
     }
   }
-  return new Date(r);
+  return new Date(l);
 }
-function b(r) {
-  return new Date(r.getFullYear(), r.getMonth(), 1);
+function x(l) {
+  return new Date(l.getFullYear(), l.getMonth(), 1);
 }
-function k(r) {
-  return new Date(r.getFullYear(), r.getMonth() + 1, 0);
+function L(l) {
+  return new Date(l.getFullYear(), l.getMonth() + 1, 0);
 }
-function x(r, t = 1) {
-  const a = (r.getDay() - t + 7) % 7, i = new Date(r);
-  return i.setDate(r.getDate() - a), i;
+function $(l, t = 1) {
+  const a = (l.getDay() - t + 7) % 7, i = new Date(l);
+  return i.setDate(l.getDate() - a), i;
 }
-const C = {
+const E = {
   primaryColor: "#357ebd",
   secondaryColor: "#ccc",
   backgroundColor: "#ffffff",
@@ -81,7 +87,7 @@ const C = {
   borderRadius: "4px",
   fontSize: "15px",
   fontFamily: "arial"
-}, A = {
+}, B = {
   primaryColor: "#0d6efd",
   secondaryColor: "#6c757d",
   backgroundColor: "#ffffff",
@@ -97,7 +103,7 @@ const C = {
   borderRadius: "6px",
   fontSize: "14px",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-}, H = {
+}, R = {
   primaryColor: "#1976d2",
   secondaryColor: "#757575",
   backgroundColor: "#ffffff",
@@ -114,18 +120,59 @@ const C = {
   fontSize: "14px",
   fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif'
 };
-class w {
-  constructor(t, e = C) {
-    this.container = t, this.theme = { ...C, ...e };
+class T {
+  constructor(t, e = E) {
+    this.mode = "light", this.handleMediaChange = () => {
+      this.mode === "auto" && this.applyTheme();
+    }, this.container = t, this.theme = { ...E, ...e }, this.setupMediaQueryListener();
   }
   applyTheme() {
     this.removeExistingStyles(), this.createAndApplyStyles(), this.forceReflow();
   }
   setTheme(t) {
-    this.theme = { ...C, ...t }, this.applyTheme();
+    this.theme = { ...E, ...t }, this.applyTheme();
+  }
+  setMode(t) {
+    this.mode = t, this.applyTheme();
+  }
+  getMode() {
+    return this.mode;
+  }
+  getCurrentMode() {
+    var t;
+    return this.mode === "auto" ? (t = this.mediaQuery) != null && t.matches ? "dark" : "light" : this.mode === "dark" ? "dark" : "light";
   }
   cleanup() {
-    this.removeExistingStyles();
+    this.removeExistingStyles(), this.mediaQuery && this.mediaQuery.removeEventListener("change", this.handleMediaChange);
+  }
+  setupMediaQueryListener() {
+    this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"), this.mediaQuery.addEventListener("change", this.handleMediaChange);
+  }
+  getThemeForMode() {
+    return this.getCurrentMode() === "dark" ? {
+      ...this.theme,
+      backgroundColor: "#1f2937",
+      // Fondo oscuro
+      borderColor: "#4b5563",
+      // Bordes grises oscuros
+      textColor: "#f9fafb",
+      // Texto blanco/claro
+      hoverColor: "#4b5563",
+      // Hover gris más claro para mejor contraste
+      // Mantener colores originales del tema para selected, range, etc.
+      selectedColor: this.theme.selectedColor,
+      // Mantener color original
+      rangeColor: this.theme.rangeColor,
+      // Mantener color original
+      todayColor: this.theme.todayColor,
+      // Mantener color original
+      disabledColor: "#6b7280",
+      // Gris para deshabilitado
+      applyButtonColor: this.theme.applyButtonColor,
+      // Mantener color original
+      cancelButtonColor: this.theme.cancelButtonColor
+      // Mantener color original
+    } : this.theme;
   }
   removeExistingStyles() {
     if (this.styleId) {
@@ -145,8 +192,8 @@ class w {
     this.container.offsetHeight;
   }
   generateThemeCSS() {
-    const t = this.theme;
-    return `
+    const t = this.getThemeForMode(), e = this.getCurrentMode();
+    return this.container.classList.remove("datex-light", "datex-dark"), this.container.classList.add(`datex-${e}`), `
       .datex-picker {
         background-color: ${t.backgroundColor} !important;
         border: 1px solid ${t.borderColor} !important;
@@ -159,6 +206,26 @@ class w {
         z-index: 3001 !important;
       }
 
+      .datex-picker.single {
+        width: 230px !important;
+      }
+
+      .datex-picker.single .drp-calendar.right {
+        display: none !important;
+      }
+
+      .datex-picker.single .drp-calendar.left {
+        float: none !important;
+        clear: none !important;
+      }
+
+      .datex-picker.single .drp-calendar.left .calendar-table {
+        border-right: 1px solid ${t.borderColor} !important;
+        border-top-right-radius: ${t.borderRadius} !important;
+        border-bottom-right-radius: ${t.borderRadius} !important;
+        padding-right: 8px !important;
+      }
+
       .datex-picker select,
       .datex-picker select * {
         user-select: auto !important;
@@ -218,7 +285,7 @@ class w {
       .datex-picker .calendar-table .next span,
       .datex-picker .calendar-table .prev span {
         color: #fff !important;
-        border: solid black !important;
+        border: solid ${e === "dark" ? t.textColor : "black"} !important;
         border-width: 0 2px 2px 0 !important;
         border-radius: 0 !important;
         display: inline-block !important;
@@ -245,13 +312,18 @@ class w {
 
       .datex-picker .calendar-table .next:hover,
       .datex-picker .calendar-table .prev:hover {
-        background-color: #f0f0f0 !important;
+        background-color: ${e === "dark" ? t.hoverColor : "#f0f0f0"} !important;
       }
 
       .datex-picker td.available:hover,
       .datex-picker th.available:hover {
-        background-color: #eee !important;
+        background-color: ${e === "dark" ? "#4b5563" : "#eee"} !important;
         border-color: transparent !important;
+        color: ${e === "dark" ? "#ffffff" : "#000000"} !important;
+      }
+
+      .datex-picker td.available,
+      .datex-picker th.available {
         color: ${t.textColor} !important;
       }
 
@@ -273,7 +345,7 @@ class w {
       .datex-picker td.in-range {
         background-color: ${t.rangeColor} !important;
         border-color: transparent !important;
-        color: #000 !important;
+        color: #000000 !important;
         border-radius: 0 !important;
       }
 
@@ -364,7 +436,7 @@ class w {
       .datex-picker .drp-buttons {
         clear: both !important;
         text-align: right !important;
-        padding: 2px !important;
+        padding: 8px !important;
         border-top: 1px solid ${t.borderColor} !important;
         display: none !important;
         line-height: 10px !important;
@@ -474,13 +546,12 @@ class w {
 
       .datex-picker .calendar-time {
         text-align: center !important;
-        margin: 4px auto 0 auto !important;
-        line-height: 30px !important;
+        margin: 0 auto !important;
+        line-height: 24px !important;
         position: relative !important;
         display: block !important;
         background: ${t.backgroundColor} !important;
-        padding: 8px !important;
-        border-top: 1px solid ${t.borderColor} !important;
+        padding: 4px 8px !important;
       }
 
       .datex-picker .calendar-time select.disabled {
@@ -559,7 +630,7 @@ class w {
     `;
   }
 }
-class S {
+class A {
   constructor() {
     this.boundHandlers = /* @__PURE__ */ new Map();
   }
@@ -594,7 +665,7 @@ class S {
     t.dispatchEvent(i);
   }
 }
-class E {
+class F {
   constructor(t, e, a) {
     this.element = t, this.container = e, this.options = a;
   }
@@ -611,11 +682,11 @@ class E {
     const e = this.container.offsetWidth, a = this.container.offsetHeight, { top: i, drops: s } = this.calculateVerticalPosition(
       t,
       a
-    ), n = this.calculateHorizontalPosition(
+    ), r = this.calculateHorizontalPosition(
       t,
       e
     );
-    this.applyDropUpClass(s), this.applyFinalPosition(i, n);
+    this.applyDropUpClass(s), this.applyFinalPosition(i, r);
   }
   resetContainerPosition() {
     this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed";
@@ -657,36 +728,106 @@ class E {
     this.container.style.top = `${t}px`, this.container.style.left = `${e}px`, this.container.style.right = "auto", this.container.style.zIndex = "99999";
   }
 }
-class L {
+class H {
   constructor(t, e) {
     this.options = t, this.locale = e;
   }
   buildCalendarMatrix(t) {
-    const e = b(t), a = x(e, this.locale.firstDay), i = [];
+    const e = x(t), a = $(e, this.locale.firstDay), i = [];
     let s = [];
-    const n = new Date(a);
-    for (let o = 0; o < 42; o++) {
-      o > 0 && o % 7 === 0 && (i.push(s), s = []);
-      const l = new Date(n);
-      l.setDate(n.getDate() + o), s.push(l);
+    const r = new Date(a);
+    for (let n = 0; n < 42; n++) {
+      n > 0 && n % 7 === 0 && (i.push(s), s = []);
+      const o = new Date(r);
+      o.setDate(r.getDate() + n), s.push(o);
     }
     return s.length > 0 && i.push(s), i;
   }
-  renderCalendarHTML(t, e, a, i, s, n) {
-    const o = t.month, l = o.getFullYear(), c = o.getMonth();
-    let u = '<table class="table-condensed">';
-    return u += this.renderHeader(e, c, l, s, n), u += this.renderDayHeaders(), u += this.renderCalendarBody(
+  renderCalendarHTML(t, e, a, i, s, r) {
+    const n = t.month, o = n.getFullYear(), c = n.getMonth();
+    let d = '<table class="table-condensed">';
+    return d += this.renderHeader(e, c, o, s, r), d += this.renderDayHeaders(), d += this.renderCalendarBody(
       t.calendar,
-      o,
+      n,
       a,
       i
-    ), u += "</table>", u;
+    ), d += "</table>", this.options.timePicker && (d += this.renderTimeControls(
+      e === "left" ? a : i || a
+    )), d;
+  }
+  renderTimeControls(t) {
+    let e = '<div class="calendar-time">';
+    e += '<select class="hourselect">';
+    const a = this.options.timePicker24Hour, i = a ? 23 : 12, s = a ? 0 : 1;
+    for (let n = s; n <= i; n++) {
+      const o = a ? n : n === 0 ? 12 : n, c = String(o).padStart(2, "0"), d = a ? t.getHours() : t.getHours() % 12 || 12;
+      let m = !1;
+      if (this.options.minDate || this.options.maxDate) {
+        const D = new Date(t), M = a ? o : t.getHours() >= 12 ? o === 12 ? 12 : o + 12 : o === 12 ? 0 : o;
+        if (D.setHours(M), this.options.minDate) {
+          const v = new Date(D);
+          v.setMinutes(59), v < this.options.minDate && (m = !0);
+        }
+        if (this.options.maxDate) {
+          const v = new Date(D);
+          v.setMinutes(0), v > this.options.maxDate && (m = !0);
+        }
+      }
+      e += `<option value="${o}"${o === d && !m ? ' selected="selected"' : ""}${m ? ' disabled="disabled" class="disabled"' : ""}>${c}</option>`;
+    }
+    e += "</select>", e += " : ", e += '<select class="minuteselect">';
+    const r = this.options.timePickerIncrement || 1;
+    for (let n = 0; n < 60; n += r) {
+      const o = String(n).padStart(2, "0");
+      let c = !1;
+      if (this.options.minDate || this.options.maxDate) {
+        const p = new Date(t);
+        if (p.setMinutes(n), this.options.minDate) {
+          const h = new Date(p);
+          h.setSeconds(59), h < this.options.minDate && (c = !0);
+        }
+        if (this.options.maxDate) {
+          const h = new Date(p);
+          h.setSeconds(0), h > this.options.maxDate && (c = !0);
+        }
+      }
+      const d = n === t.getMinutes() && !c ? ' selected="selected"' : "";
+      e += `<option value="${n}"${d}${c ? ' disabled="disabled" class="disabled"' : ""}>${o}</option>`;
+    }
+    if (e += "</select>", this.options.timePickerSeconds) {
+      e += " : ", e += '<select class="secondselect">';
+      for (let n = 0; n < 60; n++) {
+        const o = String(n).padStart(2, "0");
+        let c = !1;
+        if (this.options.minDate || this.options.maxDate) {
+          const p = new Date(t);
+          p.setSeconds(n), this.options.minDate && p < this.options.minDate && (c = !0), this.options.maxDate && p > this.options.maxDate && (c = !0);
+        }
+        const d = n === t.getSeconds() && !c ? ' selected="selected"' : "";
+        e += `<option value="${n}"${d}${c ? ' disabled="disabled" class="disabled"' : ""}>${o}</option>`;
+      }
+      e += "</select>";
+    }
+    if (!a) {
+      e += " ", e += '<select class="ampmselect">';
+      const n = t.getHours() < 12;
+      let o = !1, c = !1;
+      if (this.options.minDate || this.options.maxDate) {
+        const p = new Date(t);
+        p.setHours(6, 0, 0);
+        const h = new Date(t);
+        h.setHours(18, 0, 0), this.options.minDate && p < this.options.minDate && (o = !0), this.options.maxDate && h > this.options.maxDate && (c = !0);
+      }
+      const d = o ? ' disabled="disabled" class="disabled"' : "", m = c ? ' disabled="disabled" class="disabled"' : "";
+      e += `<option value="AM"${n ? ' selected="selected"' : ""}${d}>AM</option>`, e += `<option value="PM"${n ? "" : ' selected="selected"'}${m}>PM</option>`, e += "</select>";
+    }
+    return e += "</div>", e;
   }
   renderHeader(t, e, a, i, s) {
-    let n = "<thead><tr>";
-    i && (!this.options.linkedCalendars || t === "left") ? n += '<th class="prev available"><span></span></th>' : n += "<th></th>";
-    let o = this.locale.monthNames[e] + " " + a;
-    return this.options.showDropdowns && (o = this.renderDropdowns(e, a)), n += `<th colspan="5" class="month">${o}</th>`, s && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? n += '<th class="next available"><span></span></th>' : n += "<th></th>", n += "</tr>", n;
+    let r = "<thead><tr>";
+    i && (!this.options.linkedCalendars || t === "left") ? r += '<th class="prev available"><span></span></th>' : r += "<th></th>";
+    let n = this.locale.monthNames[e] + " " + a;
+    return this.options.showDropdowns && (n = this.renderDropdowns(e, a)), r += `<th colspan="5" class="month">${n}</th>`, s && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? r += '<th class="next available"><span></span></th>' : r += "<th></th>", r += "</tr>", r;
   }
   renderDayHeaders() {
     let t = "<tr>";
@@ -696,19 +837,19 @@ class L {
   }
   renderCalendarBody(t, e, a, i) {
     let s = "<tbody>";
-    for (const n of t) {
+    for (const r of t) {
       s += "<tr>";
-      for (const o of n) {
-        const l = this.getDayClasses(
-          o,
+      for (const n of r) {
+        const o = this.getDayClasses(
+          n,
           e,
           a,
           i
-        ), c = l.includes("disabled"), u = l.join(" ") + (c ? "" : " available");
-        s += `<td class="${u}" data-date="${g(
-          o,
+        ), c = o.includes("disabled"), d = o.join(" ") + (c ? "" : " available");
+        s += `<td class="${d}" data-date="${C(
+          n,
           "YYYY-MM-DD"
-        )}">${o.getDate()}</td>`;
+        )}">${n.getDate()}</td>`;
       }
       s += "</tr>";
     }
@@ -720,21 +861,21 @@ class L {
       e,
       a,
       i
-    ), n = this.renderYearDropdown(e, a, i);
-    return s + " " + n;
+    ), r = this.renderYearDropdown(e, a, i);
+    return s + " " + r;
   }
   calculateYearRange(t) {
     let e = this.options.minYear, a = this.options.maxYear;
     return this.options.minDate && (e = Math.max(e, this.options.minDate.getFullYear())), this.options.maxDate && (a = Math.min(a, this.options.maxDate.getFullYear())), { minYear: e, maxYear: a };
   }
   renderMonthDropdown(t, e, a, i) {
-    const s = e === a, n = e === i;
-    let o = '<select class="monthselect">';
-    for (let l = 0; l < 12; l++) {
+    const s = e === a, r = e === i;
+    let n = '<select class="monthselect">';
+    for (let o = 0; o < 12; o++) {
       let c = !1;
-      s && this.options.minDate && l < this.options.minDate.getMonth() && (c = !0), n && this.options.maxDate && l > this.options.maxDate.getMonth() && (c = !0), o += `<option value="${l}"${l === t ? ' selected="selected"' : ""}${c ? ' disabled="disabled"' : ""}>${this.locale.monthNames[l]}</option>`;
+      s && this.options.minDate && o < this.options.minDate.getMonth() && (c = !0), r && this.options.maxDate && o > this.options.maxDate.getMonth() && (c = !0), n += `<option value="${o}"${o === t ? ' selected="selected"' : ""}${c ? ' disabled="disabled"' : ""}>${this.locale.monthNames[o]}</option>`;
     }
-    return o += "</select>", o;
+    return n += "</select>", n;
   }
   renderYearDropdown(t, e, a) {
     let i = '<select class="yearselect">';
@@ -744,16 +885,16 @@ class L {
   }
   getDayClasses(t, e, a, i) {
     const s = [];
-    return d(t, /* @__PURE__ */ new Date(), "day") && s.push("today"), (t.getDay() === 0 || t.getDay() === 6) && s.push("weekend"), t.getMonth() !== e.getMonth() && s.push("off", "ends"), this.options.minDate && p(t, v(this.options.minDate)) && s.push("off", "disabled"), this.options.maxDate && D(t, y(this.options.maxDate)) && s.push("off", "disabled"), d(t, a, "day") && s.push("active", "start-date"), i && d(t, i, "day") && s.push("active", "end-date"), i && D(t, a) && p(t, i) && s.push("in-range"), s;
+    return u(t, /* @__PURE__ */ new Date(), "day") && s.push("today"), (t.getDay() === 0 || t.getDay() === 6) && s.push("weekend"), t.getMonth() !== e.getMonth() && s.push("off", "ends"), this.options.minDate && g(t, w(this.options.minDate)) && s.push("off", "disabled"), this.options.maxDate && k(t, S(this.options.maxDate)) && s.push("off", "disabled"), u(t, a, "day") && s.push("active", "start-date"), i && u(t, i, "day") && s.push("active", "end-date"), i && k(t, a) && g(t, i) && s.push("in-range"), s;
   }
   canNavigatePrevious(t) {
-    return !this.options.minDate || D(b(t), this.options.minDate);
+    return !this.options.minDate || k(x(t), this.options.minDate);
   }
   canNavigateNext(t) {
-    return !this.options.maxDate || p(k(t), this.options.maxDate);
+    return !this.options.maxDate || g(L(t), this.options.maxDate);
   }
 }
-class M {
+class I {
   constructor(t = {}) {
     this.validation = t;
   }
@@ -846,7 +987,7 @@ class M {
     return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
   }
 }
-class $ {
+class P {
   constructor(t, e = {}) {
     this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
       enabled: !0,
@@ -862,10 +1003,12 @@ class $ {
     }, this.options.enabled && this.setupKeyboardEvents();
   }
   setHandlers(t) {
-    this.onDateSelect = t.onDateSelect, this.onClose = t.onClose, this.onApply = t.onApply, this.onCancel = t.onCancel, this.onToday = t.onToday, this.onClear = t.onClear;
+    this.onDateSelect = t.onDateSelect, this.onClose = t.onClose, this.onApply = t.onApply, this.onToday = t.onToday, this.onClear = t.onClear;
   }
   activate(t) {
-    this.isActive = !0, this.currentFocusedDate = t || /* @__PURE__ */ new Date(), this.updateFocusedDate(), this.container.focus();
+    this.isActive = !0, this.currentFocusedDate = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date(), setTimeout(() => {
+      this.isActive && this.updateFocusedDate();
+    }, 100), this.container.focus({ preventScroll: !0 });
   }
   deactivate() {
     this.isActive = !1, this.currentFocusedDate = null, this.removeFocusStyles();
@@ -874,7 +1017,7 @@ class $ {
     this.container.setAttribute("tabindex", "0"), this.container.addEventListener("keydown", this.handleKeyDown.bind(this)), this.container.addEventListener("focus", this.handleFocus.bind(this)), this.container.addEventListener("blur", this.handleBlur.bind(this));
   }
   handleKeyDown(t) {
-    var n, o, l, c;
+    var r, n, o, c;
     if (!this.isActive || !this.currentFocusedDate) return;
     const { key: e, ctrlKey: a, shiftKey: i, altKey: s } = t;
     switch (e) {
@@ -906,7 +1049,16 @@ class $ {
     switch (e) {
       case "Enter":
       case " ":
-        t.preventDefault(), this.currentFocusedDate && this.onDateSelect && this.onDateSelect(this.currentFocusedDate);
+        if (t.preventDefault(), this.currentFocusedDate && this.onDateSelect) {
+          const d = new Date(this.currentFocusedDate.getTime());
+          console.log("=== KEYBOARD DEBUG ==="), console.log("Original focused date:", this.currentFocusedDate), console.log(
+            "Original focused day:",
+            this.currentFocusedDate.getDate()
+          ), console.log("Copy to select:", d), console.log("Copy day:", d.getDate()), console.log(
+            "Are they equal?",
+            this.currentFocusedDate.getTime() === d.getTime()
+          ), console.log("======================"), this.onDateSelect(d);
+        }
         break;
       case "Escape":
         t.preventDefault(), this.onClose && this.onClose();
@@ -914,10 +1066,10 @@ class $ {
     }
     if (!a && !s)
       switch (e.toLowerCase()) {
-        case ((o = (n = this.options.shortcuts) == null ? void 0 : n.today) == null ? void 0 : o.toLowerCase()):
+        case ((n = (r = this.options.shortcuts) == null ? void 0 : r.today) == null ? void 0 : n.toLowerCase()):
           t.preventDefault(), this.onToday && this.onToday();
           break;
-        case ((c = (l = this.options.shortcuts) == null ? void 0 : l.clear) == null ? void 0 : c.toLowerCase()):
+        case ((c = (o = this.options.shortcuts) == null ? void 0 : o.clear) == null ? void 0 : c.toLowerCase()):
           t.preventDefault(), this.onClear && this.onClear();
           break;
       }
@@ -929,7 +1081,9 @@ class $ {
       }
   }
   handleFocus() {
-    this.isActive || this.activate();
+    this.isActive || (this.isActive = !0, this.currentFocusedDate = this.currentFocusedDate || /* @__PURE__ */ new Date(), setTimeout(() => {
+      this.isActive && this.updateFocusedDate();
+    }, 150));
   }
   handleBlur() {
     setTimeout(() => {
@@ -938,31 +1092,47 @@ class $ {
   }
   navigateDate(t) {
     if (!this.currentFocusedDate) return;
-    const e = new Date(this.currentFocusedDate);
+    const e = new Date(this.currentFocusedDate.getTime());
     e.setDate(e.getDate() + t), this.currentFocusedDate = e, this.updateFocusedDate();
   }
   navigateMonth(t) {
     if (!this.currentFocusedDate) return;
-    const e = new Date(this.currentFocusedDate);
+    const e = new Date(this.currentFocusedDate.getTime());
     e.setMonth(e.getMonth() + t), this.currentFocusedDate = e, this.updateFocusedDate();
   }
   navigateToStartOfWeek() {
     if (!this.currentFocusedDate) return;
-    const t = new Date(this.currentFocusedDate), e = t.getDay();
+    const t = new Date(this.currentFocusedDate.getTime()), e = t.getDay();
     t.setDate(t.getDate() - e), this.currentFocusedDate = t, this.updateFocusedDate();
   }
   navigateToEndOfWeek() {
     if (!this.currentFocusedDate) return;
-    const t = new Date(this.currentFocusedDate), e = t.getDay();
+    const t = new Date(this.currentFocusedDate.getTime()), e = t.getDay();
     t.setDate(t.getDate() + (6 - e)), this.currentFocusedDate = t, this.updateFocusedDate();
   }
   updateFocusedDate() {
     if (!this.currentFocusedDate) return;
     this.removeFocusStyles();
-    const t = this.formatDateForSelector(this.currentFocusedDate), e = this.container.querySelector(
+    const t = this.formatDateForSelector(this.currentFocusedDate);
+    console.log("Keyboard: Looking for cell with data-date:", t), console.log(
+      "Keyboard: Current focused date:",
+      this.currentFocusedDate.toDateString()
+    );
+    const e = this.container.querySelector(
       `[data-date="${t}"]`
     );
-    e && (e.classList.add("keyboard-focused"), e.setAttribute("aria-selected", "true"), e.scrollIntoView({ block: "nearest", inline: "nearest" })), this.addFocusStyles();
+    if (e) {
+      if (console.log("Keyboard: Found cell, text content:", e.textContent), e.classList.add("keyboard-focused"), e.setAttribute("aria-selected", "true"), this.isActive && this.container.offsetParent !== null) {
+        const a = this.container.getBoundingClientRect(), i = e.getBoundingClientRect();
+        (i.top < a.top || i.bottom > a.bottom || i.left < a.left || i.right > a.right) && e.scrollIntoView({
+          block: "nearest",
+          inline: "nearest",
+          behavior: "smooth"
+        });
+      }
+    } else
+      console.log("Keyboard: Cell not found for date:", t);
+    this.addFocusStyles();
   }
   removeFocusStyles() {
     this.container.querySelectorAll(".keyboard-focused").forEach((e) => {
@@ -978,6 +1148,7 @@ class $ {
         outline-offset: -2px !important;
         z-index: 10 !important;
         position: relative !important;
+        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
       }
       
       .datex-picker .calendar-table td.keyboard-focused > * {
@@ -985,18 +1156,32 @@ class $ {
         color: white !important;
         font-weight: 600 !important;
       }
+      
+      /* Prevent layout shifts */
+      .datex-picker {
+        contain: layout style !important;
+      }
+      
+      .datex-picker .calendar-table {
+        contain: layout !important;
+      }
     `, document.head.appendChild(t);
   }
   formatDateForSelector(t) {
-    const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0");
-    return `${e}-${a}-${i}`;
+    const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0"), s = `${e}-${a}-${i}`;
+    return console.log(
+      "Keyboard: Formatting date for selector:",
+      t.toDateString(),
+      "-> formatted:",
+      s
+    ), s;
   }
   // Public methods
   getCurrentFocusedDate() {
-    return this.currentFocusedDate;
+    return this.currentFocusedDate ? new Date(this.currentFocusedDate.getTime()) : null;
   }
   setFocusedDate(t) {
-    this.currentFocusedDate = t, this.updateFocusedDate();
+    this.currentFocusedDate = new Date(t.getTime()), this.updateFocusedDate();
   }
   cleanup() {
     this.container.removeEventListener(
@@ -1007,7 +1192,7 @@ class $ {
     t && t.remove();
   }
 }
-const F = {
+const Y = {
   format: "DD/MM/YYYY",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -1029,7 +1214,7 @@ const F = {
     "Diciembre"
   ],
   firstDay: 1
-}, I = {
+}, V = {
   format: "DD/MM/YYYY HH:mm",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -1052,10 +1237,10 @@ const F = {
   ],
   firstDay: 1
 };
-class P {
+class O {
   constructor(t, e = {}, a) {
     this.element = this.resolveElement(t), this.options = this.mergeWithDefaults(e), this.locale = this.options.locale, this.callback = a || (() => {
-    }), this.eventService = new S(), this.initializeState(), this.initializeServices(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
+    }), this.eventService = new A(), this.initializeState(), this.initializeServices(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
   }
   resolveElement(t) {
     if (typeof t == "string") {
@@ -1089,11 +1274,11 @@ class P {
       ranges: t.ranges || {},
       opens: t.opens || "center",
       drops: t.drops || "auto",
-      locale: t.locale || F,
+      locale: t.locale || Y,
       buttonClasses: t.buttonClasses || "btn btn-sm",
       applyButtonClasses: t.applyButtonClasses || "btn-success",
       cancelButtonClasses: t.cancelButtonClasses || "btn-danger",
-      theme: t.theme || C,
+      theme: t.theme || E,
       validation: t.validation || {},
       events: t.events || {}
     };
@@ -1102,19 +1287,19 @@ class P {
   initializeState() {
     const t = /* @__PURE__ */ new Date();
     this.state = {
-      startDate: this.options.timePicker ? this.options.startDate : v(this.options.startDate),
-      endDate: this.options.timePicker ? this.options.endDate : y(this.options.endDate),
-      oldStartDate: this.options.timePicker ? this.options.startDate : v(this.options.startDate),
-      oldEndDate: this.options.timePicker ? this.options.endDate : y(this.options.endDate),
+      startDate: this.options.timePicker ? this.options.startDate : w(this.options.startDate),
+      endDate: this.options.timePicker ? this.options.endDate : S(this.options.endDate),
+      oldStartDate: this.options.timePicker ? this.options.startDate : w(this.options.startDate),
+      oldEndDate: this.options.timePicker ? this.options.endDate : S(this.options.endDate),
       isShowing: !1,
       leftCalendar: { month: t, calendar: [] },
-      rightCalendar: { month: h(t, 1), calendar: [] },
+      rightCalendar: { month: f(t, 1), calendar: [] },
       chosenLabel: null,
       hoverDate: null
     };
   }
   initializeServices() {
-    this.calendarService = new L(this.options, this.locale);
+    this.calendarService = new H(this.options, this.locale);
   }
   createContainer() {
     const t = this.buildContainerTemplate(), e = document.createElement("div");
@@ -1145,11 +1330,11 @@ class P {
     `;
   }
   initializeContainerServices() {
-    this.themeService = new w(this.container, this.options.theme), this.positionService = new E(
+    this.themeService = new T(this.container, this.options.theme), this.positionService = new F(
       this.element,
       this.container,
       this.options
-    ), this.validationService = new M(this.options.validation), this.keyboardService = new $(this.container, {
+    ), this.validationService = new I(this.options.validation), this.keyboardService = new P(this.container, {
       enabled: !0
     }), this.keyboardService.setHandlers({
       onDateSelect: (t) => {
@@ -1177,7 +1362,9 @@ class P {
   }
   // Public API methods
   show() {
-    this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.updateView(), this.displayContainer(), this.positionContainer(), this.keyboardService.activate(this.state.startDate), this.dispatchShowEvent());
+    this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.updateView(), this.displayContainer(), this.positionContainer(), setTimeout(() => {
+      this.state.isShowing && this.keyboardService.activate(this.state.startDate);
+    }, 200), this.dispatchShowEvent());
   }
   hide() {
     this.state.isShowing && (this.revertIfIncomplete(), this.triggerCallbackIfChanged(), this.updateElement(), this.removeDocumentListeners(), this.keyboardService.deactivate(), this.hideContainer(), this.dispatchHideEvent());
@@ -1186,10 +1373,10 @@ class P {
     this.state.isShowing ? this.hide() : this.show();
   }
   setStartDate(t) {
-    this.state.startDate = this.options.timePicker ? new Date(t) : v(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.startDate), this.updateView();
+    this.state.startDate = this.options.timePicker ? new Date(t) : w(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.startDate), this.updateView();
   }
   setEndDate(t) {
-    this.state.endDate = this.options.timePicker ? new Date(t) : y(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.endDate), this.updateView();
+    this.state.endDate = this.options.timePicker ? new Date(t) : S(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.endDate), this.updateView();
   }
   getStartDate() {
     return new Date(this.state.startDate);
@@ -1200,6 +1387,15 @@ class P {
   setTheme(t) {
     this.themeService.setTheme(t);
   }
+  setThemeMode(t) {
+    this.themeService.setMode(t);
+  }
+  getThemeMode() {
+    return this.themeService.getMode();
+  }
+  getCurrentThemeMode() {
+    return this.themeService.getCurrentMode();
+  }
   // Validation methods
   updateValidation(t) {
     this.validationService.updateValidation(t);
@@ -1252,11 +1448,11 @@ class P {
     this.state.endDate || (this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null);
   }
   triggerCallbackIfChanged() {
-    const t = !d(
+    const t = !u(
       this.state.startDate,
       this.state.oldStartDate,
       "day"
-    ), e = this.state.endDate && this.state.oldEndDate && !d(this.state.endDate, this.state.oldEndDate, "day");
+    ), e = this.state.endDate && this.state.oldEndDate && !u(this.state.endDate, this.state.oldEndDate, "day");
     (t || e) && this.callback(
       new Date(this.state.startDate),
       this.state.endDate ? new Date(this.state.endDate) : new Date(this.state.startDate),
@@ -1279,12 +1475,13 @@ class P {
     this.removeDocumentListeners(), this.themeService.cleanup(), this.eventService.cleanup(), this.keyboardService.cleanup(), (t = this.container) != null && t.parentNode && this.container.parentNode.removeChild(this.container);
   }
   handleKeyboardDateSelect(t) {
+    console.log("DateX: Received date from keyboard:", t.toDateString()), console.log("DateX: Received date day:", t.getDate());
     const e = this.validationService.validateDate(t);
     if (!e.isValid) {
       this.showValidationError(e.error, e.errorCode);
       return;
     }
-    this.state.hoverDate = null, this.state.endDate || p(t, this.state.startDate) ? (this.state.endDate = null, this.setStartDate(t)) : (this.setEndDate(t), this.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick())), this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), this.updateDateClasses();
+    this.state.hoverDate = null, this.state.endDate || g(t, this.state.startDate) ? (this.state.endDate = null, this.setStartDate(t)) : (this.setEndDate(t), this.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick())), this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), this.updateDateClasses();
   }
   clearSelection() {
     const t = /* @__PURE__ */ new Date();
@@ -1353,7 +1550,10 @@ class P {
     this.state.hoverDate && (this.state.hoverDate = null, this.updateDateClasses());
   }
   handleContainerChange(t) {
-    t.target.matches("select.monthselect, select.yearselect") && this.handleMonthYearChange(t);
+    const e = t.target;
+    e.matches("select.monthselect, select.yearselect") ? this.handleMonthYearChange(t) : e.matches(
+      "select.hourselect, select.minuteselect, select.secondselect, select.ampmselect"
+    ) && this.handleTimeChange(t);
   }
   handleOutsideClick(t) {
     const e = t.target;
@@ -1375,11 +1575,11 @@ class P {
     const t = this.element;
     if (!((s = t.value) != null && s.length)) return;
     const e = t.value.split(this.locale.separator), { startDate: a, endDate: i } = this.parseDateParts(e);
-    a && f(a) && i && f(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
+    a && y(a) && i && y(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
   }
   parseDateParts(t) {
     let e = null, a = null;
-    return t.length === 2 ? (e = m(t[0].trim(), this.locale.format), a = m(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = m(t[0].trim(), this.locale.format), a = e), { startDate: e, endDate: a };
+    return t.length === 2 ? (e = b(t[0].trim(), this.locale.format), a = b(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = b(t[0].trim(), this.locale.format), a = e), { startDate: e, endDate: a };
   }
   handleKeydown(t) {
     t.key === "Tab" || t.key === "Enter" ? this.hide() : t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.hide());
@@ -1393,8 +1593,8 @@ class P {
       else {
         const i = this.options.ranges[a];
         if (i) {
-          const [s, n] = i;
-          this.state.startDate = new Date(s), this.state.endDate = new Date(n), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
+          const [s, r] = i;
+          this.state.startDate = new Date(s), this.state.endDate = new Date(r), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
         }
       }
   }
@@ -1406,63 +1606,63 @@ class P {
   }
   handlePrevClick(t) {
     const a = t.target.closest(".drp-calendar");
-    a && (a.classList.contains("left") ? (this.state.leftCalendar.month = h(
+    a && (a.classList.contains("left") ? (this.state.leftCalendar.month = f(
       this.state.leftCalendar.month,
       -1
-    ), this.options.linkedCalendars && (this.state.rightCalendar.month = h(
+    ), this.options.linkedCalendars && (this.state.rightCalendar.month = f(
       this.state.rightCalendar.month,
       -1
-    ))) : this.state.rightCalendar.month = h(
+    ))) : this.state.rightCalendar.month = f(
       this.state.rightCalendar.month,
       -1
     ), this.updateCalendars());
   }
   handleNextClick(t) {
     const a = t.target.closest(".drp-calendar");
-    a && (a.classList.contains("left") ? this.state.leftCalendar.month = h(
+    a && (a.classList.contains("left") ? this.state.leftCalendar.month = f(
       this.state.leftCalendar.month,
       1
-    ) : (this.state.rightCalendar.month = h(
+    ) : (this.state.rightCalendar.month = f(
       this.state.rightCalendar.month,
       1
-    ), this.options.linkedCalendars && (this.state.leftCalendar.month = h(
+    ), this.options.linkedCalendars && (this.state.leftCalendar.month = f(
       this.state.leftCalendar.month,
       1
     ))), this.updateCalendars());
   }
   handleDateClick(t) {
-    var n, o;
+    var r, n;
     const e = t.target;
     if (!e.classList.contains("available")) return;
     const a = e.dataset.date;
     if (!a) return;
-    const i = m(a, "YYYY-MM-DD");
-    if (!f(i)) return;
+    const i = b(a, "YYYY-MM-DD");
+    if (!y(i)) return;
     const s = this.validationService.validateDate(i);
     if (!s.isValid) {
       this.showValidationError(s.error, s.errorCode);
       return;
     }
-    if (!((n = this.options.events) != null && n.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
-      if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || p(i, this.state.startDate))
+    if (!((r = this.options.events) != null && r.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
+      if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || g(i, this.state.startDate))
         this.state.endDate = null, this.setStartDate(i);
       else {
         if (this.setEndDate(i), this.state.startDate && this.state.endDate) {
-          const l = this.validationService.validateDateRange(
+          const o = this.validationService.validateDateRange(
             this.state.startDate,
             this.state.endDate
           );
-          if (!l.isValid) {
+          if (!o.isValid) {
             this.showValidationError(
-              l.error,
-              l.errorCode
+              o.error,
+              o.errorCode
             ), this.state.endDate = null, this.updateDateClasses();
             return;
           }
         }
         this.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick());
       }
-      this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), (o = this.options.events) != null && o.onDateSelect && this.options.events.onDateSelect(i), this.updateDateClasses();
+      this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), (n = this.options.events) != null && n.onDateSelect && this.options.events.onDateSelect(i), this.updateDateClasses();
     }
   }
   handleDateHover(t) {
@@ -1470,30 +1670,71 @@ class P {
     if (!e.classList.contains("available")) return;
     const a = e.dataset.date;
     if (!a) return;
-    const i = m(a, "YYYY-MM-DD");
-    f(i) && !this.state.endDate && !p(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
+    const i = b(a, "YYYY-MM-DD");
+    y(i) && !this.state.endDate && !g(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
   }
   handleMonthYearChange(t) {
     const a = t.target.closest(".drp-calendar");
     if (!a) return;
     const i = a.classList.contains("left"), s = a.querySelector(
       ".monthselect"
-    ), n = a.querySelector(
+    ), r = a.querySelector(
       ".yearselect"
     );
-    if (!s || !n) return;
-    const o = parseInt(s.value, 10), l = parseInt(n.value, 10), c = new Date(l, o, 1);
-    i ? (this.state.leftCalendar.month = c, this.options.linkedCalendars && (this.state.rightCalendar.month = h(c, 1))) : (this.state.rightCalendar.month = c, this.options.linkedCalendars && (this.state.leftCalendar.month = h(c, -1))), this.updateCalendars();
+    if (!s || !r) return;
+    const n = parseInt(s.value, 10), o = parseInt(r.value, 10), c = new Date(o, n, 1);
+    i ? (this.state.leftCalendar.month = c, this.options.linkedCalendars && (this.state.rightCalendar.month = f(c, 1))) : (this.state.rightCalendar.month = c, this.options.linkedCalendars && (this.state.leftCalendar.month = f(c, -1))), this.updateCalendars();
+  }
+  handleTimeChange(t) {
+    const a = t.target.closest(".drp-calendar");
+    if (!a) return;
+    const i = a.classList.contains("left"), s = i ? this.state.startDate : this.state.endDate || this.state.startDate, r = a.querySelector(
+      ".hourselect"
+    ), n = a.querySelector(
+      ".minuteselect"
+    ), o = a.querySelector(
+      ".secondselect"
+    ), c = a.querySelector(
+      ".ampmselect"
+    );
+    if (!r || !n) return;
+    let d = parseInt(r.value, 10);
+    const m = parseInt(n.value, 10) || 0, p = o ? parseInt(o.value, 10) : 0;
+    if (!this.options.timePicker24Hour && c) {
+      const D = c.value;
+      D === "PM" && d < 12 && (d += 12), D === "AM" && d === 12 && (d = 0);
+    }
+    const h = new Date(s);
+    if (h.setHours(d), h.setMinutes(m), h.setSeconds(p), this.options.timePickerIncrement && this.roundToIncrement(h), !(this.options.minDate && h < this.options.minDate) && !(this.options.maxDate && h > this.options.maxDate)) {
+      if (this.validationService) {
+        const D = this.validationService.validateDate(h);
+        if (!D.isValid) {
+          this.showValidationError(D.error, D.errorCode);
+          return;
+        }
+      }
+      i ? (this.state.startDate = h, this.options.singleDatePicker ? this.state.endDate = h : this.state.endDate && this.state.endDate.toDateString() === h.toDateString() && this.state.endDate < h && (this.state.endDate = new Date(h))) : this.state.endDate && (this.state.endDate = h), this.updateSelectedDisplay(), this.updateCalendars(), this.updateFormInputs();
+    }
   }
   // View update methods
   updateView() {
-    this.updateMonthsInView(), this.updateCalendars(), this.updateFormInputs(), this.updateSelectedDisplay(), this.calculateChosenLabel();
+    this.updateMonthsInView(), this.updateCalendars(), this.updateFormInputs(), this.updateSelectedDisplay(), this.calculateChosenLabel(), this.options.timePicker && this.updateTimePickerControls();
+  }
+  updateTimePickerControls() {
+    const t = this.container.querySelectorAll(
+      ".right .calendar-time select"
+    );
+    this.state.endDate ? t.forEach((e) => {
+      e.disabled = !1, e.classList.remove("disabled");
+    }) : t.forEach((e) => {
+      e.disabled = !0, e.classList.add("disabled");
+    });
   }
   updateMonthsInView() {
-    this.state.endDate ? (this.state.leftCalendar.month = b(this.state.startDate), !this.options.linkedCalendars && (this.state.endDate.getMonth() !== this.state.startDate.getMonth() || this.state.endDate.getFullYear() !== this.state.startDate.getFullYear()) ? this.state.rightCalendar.month = b(this.state.endDate) : this.state.rightCalendar.month = h(
+    this.state.endDate ? (this.state.leftCalendar.month = x(this.state.startDate), !this.options.linkedCalendars && (this.state.endDate.getMonth() !== this.state.startDate.getMonth() || this.state.endDate.getFullYear() !== this.state.startDate.getFullYear()) ? this.state.rightCalendar.month = x(this.state.endDate) : this.state.rightCalendar.month = f(
       this.state.leftCalendar.month,
       1
-    )) : (this.state.leftCalendar.month = b(this.state.startDate), this.state.rightCalendar.month = h(
+    )) : (this.state.leftCalendar.month = x(this.state.startDate), this.state.rightCalendar.month = f(
       this.state.leftCalendar.month,
       1
     ));
@@ -1508,7 +1749,7 @@ class P {
     e.calendar = this.calendarService.buildCalendarMatrix(
       e.month
     );
-    const i = this.calendarService.canNavigatePrevious(e.month), s = this.calendarService.canNavigateNext(e.month), n = this.calendarService.renderCalendarHTML(
+    const i = this.calendarService.canNavigatePrevious(e.month), s = this.calendarService.canNavigateNext(e.month), r = this.calendarService.renderCalendarHTML(
       e,
       t,
       this.state.startDate,
@@ -1516,24 +1757,24 @@ class P {
       i,
       s
     );
-    a.innerHTML = n;
+    a.innerHTML = r;
   }
   updateFormInputs() {
     const t = this.container.querySelector(
       ".applyBtn"
-    ), e = this.options.singleDatePicker || this.state.endDate && (p(this.state.startDate, this.state.endDate) || d(this.state.startDate, this.state.endDate, "day"));
+    ), e = this.options.singleDatePicker || this.state.endDate && (g(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
     t.disabled = !e;
   }
   updateSelectedDisplay() {
     const t = this.container.querySelector(".drp-selected");
-    let e = g(this.state.startDate, this.locale.format);
-    !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + g(this.state.endDate, this.locale.format)), t.textContent = e;
+    let e = C(this.state.startDate, this.locale.format);
+    !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + C(this.state.endDate, this.locale.format)), t.textContent = e;
   }
   updateElement() {
     if (this.element.tagName === "INPUT" && this.options.autoUpdateInput) {
       const t = this.element;
-      let e = g(this.state.startDate, this.locale.format);
-      !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + g(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
+      let e = C(this.state.startDate, this.locale.format);
+      !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + C(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
     }
   }
   renderRanges() {
@@ -1560,13 +1801,13 @@ class P {
     this.container.querySelectorAll("td[data-date]").forEach((e) => {
       const a = e.dataset.date;
       if (!a) return;
-      const i = m(a, "YYYY-MM-DD");
-      if (!f(i)) return;
+      const i = b(a, "YYYY-MM-DD");
+      if (!y(i)) return;
       e.classList.remove("in-range", "end-date", "start-date", "active");
-      const s = this.state.startDate, n = this.state.endDate, o = this.state.hoverDate;
-      if (s && d(i, s, "day") && e.classList.add("active", "start-date"), n && d(i, n, "day") && e.classList.add("active", "end-date"), s && n && D(i, s) && p(i, n) && e.classList.add("in-range"), s && o && !n) {
-        const l = p(o, s) ? o : s, c = p(o, s) ? s : o;
-        d(i, o, "day") ? e.classList.add("end-date") : D(i, l) && p(i, c) && e.classList.add("in-range");
+      const s = this.state.startDate, r = this.state.endDate, n = this.state.hoverDate;
+      if (s && u(i, s, "day") && e.classList.add("active", "start-date"), r && u(i, r, "day") && e.classList.add("active", "end-date"), s && r && k(i, s) && g(i, r) && e.classList.add("in-range"), s && n && !r) {
+        const o = g(n, s) ? n : s, c = g(n, s) ? s : n;
+        u(i, n, "day") ? e.classList.add("end-date") : k(i, o) && g(i, c) && e.classList.add("in-range");
       }
     });
   }
@@ -1578,24 +1819,24 @@ class P {
       ".hourselect"
     ), s = a.querySelector(
       ".minuteselect"
-    ), n = a.querySelector(
+    ), r = a.querySelector(
       ".secondselect"
-    ), o = a.querySelector(
+    ), n = a.querySelector(
       ".ampmselect"
     );
     if (i) {
-      let l = parseInt(i.value, 10);
-      if (!this.options.timePicker24Hour && o) {
-        const c = o.value;
-        c === "PM" && l < 12 && (l += 12), c === "AM" && l === 12 && (l = 0);
+      let o = parseInt(i.value, 10);
+      if (!this.options.timePicker24Hour && n) {
+        const c = n.value;
+        c === "PM" && o < 12 && (o += 12), c === "AM" && o === 12 && (o = 0);
       }
-      t.setHours(l);
+      t.setHours(o);
     }
     if (s) {
-      const l = parseInt(s.value, 10) || 0;
-      t.setMinutes(l);
+      const o = parseInt(s.value, 10) || 0;
+      t.setMinutes(o);
     }
-    this.options.timePickerSeconds && n && t.setSeconds(parseInt(n.value, 10));
+    this.options.timePickerSeconds && r && t.setSeconds(parseInt(r.value, 10));
   }
   createRangeService() {
     return {
@@ -1607,13 +1848,13 @@ class P {
       },
       calculateChosenLabel: (t, e) => {
         let a = null;
-        for (const [i, [s, n]] of Object.entries(
+        for (const [i, [s, r]] of Object.entries(
           this.options.ranges
         )) {
-          const o = d(t, s, "day");
-          let l = !1;
-          if (e ? l = d(e, n, "day") : l = d(t, n, "day"), o && l) {
-            const c = Math.abs(n.getTime() - s.getTime()) / 864e5 + 1;
+          const n = u(t, s, "day");
+          let o = !1;
+          if (e ? o = u(e, r, "day") : o = u(t, r, "day"), n && o) {
+            const c = Math.abs(r.getTime() - s.getTime()) / 864e5 + 1;
             (!a || c > a.days) && (a = { label: i, days: c });
           }
         }
@@ -1631,20 +1872,20 @@ class P {
   }
 }
 export {
-  A as BOOTSTRAP_THEME,
-  C as DEFAULT_THEME,
-  P as Datex,
-  H as MATERIAL_THEME,
-  F as SPANISH_LOCALE,
-  I as SPANISH_LOCALE_WITH_TIME,
-  h as addMonths,
-  y as endOfDay,
-  g as formatDate,
-  b as getStartOfMonth,
-  D as isAfterDate,
-  p as isBeforeDate,
-  d as isSameDate,
-  f as isValidDate,
-  m as parseDate,
-  v as startOfDay
+  B as BOOTSTRAP_THEME,
+  E as DEFAULT_THEME,
+  O as Datex,
+  R as MATERIAL_THEME,
+  Y as SPANISH_LOCALE,
+  V as SPANISH_LOCALE_WITH_TIME,
+  f as addMonths,
+  S as endOfDay,
+  C as formatDate,
+  x as getStartOfMonth,
+  k as isAfterDate,
+  g as isBeforeDate,
+  u as isSameDate,
+  y as isValidDate,
+  b as parseDate,
+  w as startOfDay
 };