@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/basecalendar/index.es.js

@@ -1,28 +1,45 @@
-import { defineComponent as ht, onMounted as yt, ref as B, shallowRef as P, computed as x, watch as ge, createBlock as he, openBlock as c, withCtx as ye, renderSlot as U, createVNode as S, createElementVNode as f, mergeProps as u, unref as q, createElementBlock as g, createCommentVNode as $, withDirectives as wt, toDisplayString as F, Fragment as Q, renderList as re, createTextVNode as Dt, normalizeProps as bt, withKeys as w, vShow as Mt } from "vue";
-import { u as kt } from "../plugins/WangsVue.es.js";
-import { s as Tt } from "../vendor/primevue/overlaypanel/overlaypanel.esm.es.js";
-import { s as St } from "../vendor/primevue/selectbutton/selectbutton.esm.es.js";
-import { s as $t } from "../vendor/primevue/skeleton/skeleton.esm.es.js";
-import { _ as se } from "../button/index.es.js";
-import { _ as Ft } from "../fieldwrapper/index.es.js";
-import { _ as X } from "../icon/index.es.js";
-import { _ as Yt } from "../inputgroup/index.es.js";
-import { _ as Ct } from "../validatormessage/index.es.js";
-const Ht = ["id"], Bt = ["id", "aria-invalid", "disabled", "placeholder", "value"], Vt = { class: "flex gap-1" }, It = { key: 2 }, Pt = {
+import { defineComponent, onMounted, ref, shallowRef, computed, watch, createBlock, openBlock, withCtx, renderSlot, createVNode, createElementVNode, mergeProps, unref, createElementBlock, createCommentVNode, withDirectives, toDisplayString, Fragment, renderList, createTextVNode, normalizeProps, withKeys, vShow } from "vue";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { s as script } from "../vendor/primevue/overlaypanel/overlaypanel.esm.es.js";
+import { s as script$2 } from "../vendor/primevue/selectbutton/selectbutton.esm.es.js";
+import { s as script$1 } from "../vendor/primevue/skeleton/skeleton.esm.es.js";
+import { _ as _sfc_main$4 } from "../button/index.es.js";
+import { _ as _sfc_main$1 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$3 } from "../icon/index.es.js";
+import { _ as _sfc_main$2 } from "../inputgroup/index.es.js";
+import { _ as _sfc_main$5 } from "../validatormessage/index.es.js";
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-invalid", "disabled", "placeholder", "value"];
+const _hoisted_3 = { class: "flex gap-1" };
+const _hoisted_4 = { key: 2 };
+const _hoisted_5 = {
   key: 0,
   class: "flex flex-col",
   "data-wv-section": "datepicker"
-}, At = { "data-wv-section": "tableheader" }, xt = {
+};
+const _hoisted_6 = { "data-wv-section": "tableheader" };
+const _hoisted_7 = {
   class: "grid grid-cols-7 justify-between h-[26.8px] items-center",
   "data-wv-section": "weekdays"
-}, Nt = {
+};
+const _hoisted_8 = {
   class: "grid grid-cols-7",
   "data-wv-section": "tablebody"
-}, Ot = ["aria-label", "data-wv-other-month", "data-wv-today"], Et = ["aria-disabled", "data-p-disabled", "onClick"], Kt = ["data-p-disabled", "data-p-highlight", "onClick"], Wt = ["data-p-disabled", "data-p-highlight", "onClick"], Lt = ["aria-label"], Rt = ["aria-label"], jt = ["aria-label", "disabled"], Ut = ["aria-label", "disabled"], qt = {
+};
+const _hoisted_9 = ["aria-label", "data-wv-other-month", "data-wv-today"];
+const _hoisted_10 = ["aria-disabled", "data-p-disabled", "onClick"];
+const _hoisted_11 = ["data-p-disabled", "data-p-highlight", "onClick"];
+const _hoisted_12 = ["data-p-disabled", "data-p-highlight", "onClick"];
+const _hoisted_13 = ["aria-label"];
+const _hoisted_14 = ["aria-label"];
+const _hoisted_15 = ["aria-label", "disabled"];
+const _hoisted_16 = ["aria-label", "disabled"];
+const _hoisted_17 = {
   key: 1,
   class: "w-full flex items-center justify-end gap-1",
   "data-wv-section": "calendarbuttons"
-}, la = /* @__PURE__ */ ht({
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BaseCalendar",
   props: {
     modelValue: {},
@@ -39,9 +56,9 @@ const Ht = ["id"], Bt = ["id", "aria-invalid", "disabled", "placeholder", "value
     mode: { default: "single" },
     selectionMode: { default: "single" },
     hideOnDateTimeSelect: { type: Boolean },
-    hideOnRangeSelection: { type: Boolean, default: !0 },
+    hideOnRangeSelection: { type: Boolean, default: true },
     view: { default: "date" },
-    showYear: { type: Boolean, default: !0 },
+    showYear: { type: Boolean, default: true },
     showButtons: { type: Boolean },
     useValidator: { type: Boolean },
     fieldName: {},
@@ -58,819 +75,1325 @@ const Ht = ["id"], Bt = ["id", "aria-invalid", "disabled", "placeholder", "value
     stepHour: { default: 1 },
     stepMinute: { default: 1 },
     useTimeFormat: { type: Boolean },
-    onlyWeekdays: { type: Boolean, default: !1 },
+    onlyWeekdays: { type: Boolean, default: false },
     excludeDates: { default: () => [] },
     minDate: {},
     maxDate: {},
     maxYear: {},
     maxMonth: {},
-    exactSelection: { type: Boolean, default: !1 }
+    exactSelection: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "update:epochTimeMillis", "monthChange", "yearChange", "dateSelect"],
-  setup(Ae, { emit: xe }) {
-    const l = Ae, A = xe;
-    yt(() => {
-      R();
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    onMounted(() => {
+      updateCalendar();
+    });
+    const config = useWangsVueConfig("Calendar");
+    const ticksTo1970 = ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 1e7;
+    const input = ref();
+    const overlayPanel = ref();
+    const wrapper = ref();
+    const currentDate = /* @__PURE__ */ new Date();
+    const currentMonth = ref(currentDate.getMonth());
+    const currentYear = ref(currentDate.getFullYear());
+    const currentHour = ref(currentDate.getHours());
+    const currentMinute = ref(currentDate.getMinutes());
+    const currentSecond = ref(currentDate.getSeconds());
+    const temporaryDate = ref(props.modelValue);
+    const changesSaved = ref(false);
+    const inputValue = shallowRef();
+    const currentView = shallowRef(props.view ?? "date");
+    const weeksInMonth = shallowRef([]);
+    const isLoading = shallowRef(false);
+    const pm = shallowRef(false);
+    const timePickerTimer = shallowRef();
+    const timePickerChange = shallowRef(false);
+    const previousDateMeta = shallowRef();
+    const previousDatesInMonth = shallowRef([]);
+    const calendarModelValue = computed(() => {
+      return props.showButtons || props.showTime ? temporaryDate.value : props.modelValue;
+    });
+    const datesInMonth = computed(() => {
+      return weeksInMonth.value.flatMap((week) => week);
+    });
+    const formattedCurrentHour = computed(() => {
+      return currentHour.value < 10 ? "0" + currentHour.value : currentHour.value;
     });
-    const Y = kt("Calendar"), Ne = (1969 * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 1e7, we = B(), Z = B(), ue = B(), L = /* @__PURE__ */ new Date(), h = B(L.getMonth()), i = B(L.getFullYear()), v = B(L.getHours()), D = B(L.getMinutes()), V = B(L.getSeconds()), N = B(l.modelValue), _ = B(!1), ie = P(), p = P(l.view ?? "date"), De = P([]), be = P(!1), y = P(!1), de = P(), Me = P(!1), ve = P(), ke = P([]), o = x(() => l.showButtons || l.showTime ? N.value : l.modelValue), ee = x(() => De.value.flatMap((e) => e)), Oe = x(() => v.value < 10 ? "0" + v.value : v.value), Ee = x(() => D.value < 10 ? "0" + D.value : D.value), Ke = x(() => l.dateFormat || Y.locale.global.dateFormat), We = x(() => {
-      const e = [], t = (a) => {
-        if (l.minDate) {
-          const n = l.minDate.getMonth(), r = l.minDate.getFullYear();
-          if (i.value < r || i.value === r && a < n)
-            return !1;
+    const formattedCurrentMinute = computed(() => {
+      return currentMinute.value < 10 ? "0" + currentMinute.value : currentMinute.value;
+    });
+    const datePattern = computed(() => {
+      return props.dateFormat || config.locale.global.dateFormat;
+    });
+    const monthPickerValues = computed(() => {
+      const months = [];
+      const isSelectableMonth = (baseMonth) => {
+        if (props.minDate) {
+          const minMonth = props.minDate.getMonth();
+          const minYear = props.minDate.getFullYear();
+          if (currentYear.value < minYear || currentYear.value === minYear && baseMonth < minMonth) {
+            return false;
+          }
         }
-        if (l.maxDate) {
-          const n = l.maxDate.getMonth(), r = l.maxDate.getFullYear();
-          if (i.value > r || i.value === r && a > n)
-            return !1;
+        if (props.maxDate) {
+          const maxMonth = props.maxDate.getMonth();
+          const maxYear = props.maxDate.getFullYear();
+          if (currentYear.value > maxYear || currentYear.value === maxYear && baseMonth > maxMonth) {
+            return false;
+          }
         }
-        if (l.maxMonth && l.maxMonth === "current") {
-          const n = /* @__PURE__ */ new Date(), r = n.getMonth(), d = n.getFullYear();
-          return a <= r && i.value == d || // In current year
-          i.value < d;
+        if (props.maxMonth) {
+          if (props.maxMonth === "current") {
+            const today = /* @__PURE__ */ new Date();
+            const monthInPresent = today.getMonth();
+            const yearInPresent = today.getFullYear();
+            return baseMonth <= monthInPresent && currentYear.value == yearInPresent || // In current year
+            currentYear.value < yearInPresent;
+          }
         }
-        return !0;
+        return true;
       };
-      for (let a = 0; a <= 11; a++)
-        e.push({
-          value: a,
-          selectable: t(a)
+      for (let i = 0; i <= 11; i++) {
+        months.push({
+          value: i,
+          selectable: isSelectableMonth(i)
         });
-      return e;
-    }), te = x(() => {
-      const e = [], t = i.value - i.value % 10, a = (n) => {
-        if (l.minDate && l.minDate.getFullYear() > n || l.maxDate && l.maxDate.getFullYear() < n)
-          return !1;
-        if (l.maxYear && l.maxYear === "current") {
-          const r = (/* @__PURE__ */ new Date()).getFullYear();
-          return n <= r;
+      }
+      return months;
+    });
+    const yearPickerValues = computed(() => {
+      const years = [];
+      const base = currentYear.value - currentYear.value % 10;
+      const isSelectableYear = (baseYear) => {
+        if (props.minDate) {
+          if (props.minDate.getFullYear() > baseYear) return false;
         }
-        return !0;
+        if (props.maxDate) {
+          if (props.maxDate.getFullYear() < baseYear) return false;
+        }
+        if (props.maxYear) {
+          if (props.maxYear === "current") {
+            const yearInPresent = (/* @__PURE__ */ new Date()).getFullYear();
+            return baseYear <= yearInPresent;
+          }
+        }
+        return true;
       };
-      for (let n = 0; n < 10; n++)
-        e.push({
-          value: t + n,
-          selectable: a(t + n)
+      for (let i = 0; i < 10; i++) {
+        years.push({
+          value: base + i,
+          selectable: isSelectableYear(base + i)
         });
-      return e;
-    }), O = x(() => {
-      let e;
-      if (o.value && ae(o.value) ? e = o.value[b(o.value)] || o.value[0] : e = o.value, e && typeof e != "string" && e.toString() !== "Invalid Date")
-        return e;
-      const t = /* @__PURE__ */ new Date();
-      return l.maxDate && l.maxDate < t ? l.maxDate : l.minDate && l.minDate > t ? l.minDate : t;
-    }), b = (e) => e.length > 2 ? e.length - 1 : 1, Le = () => {
-      const e = new Date(i.value, h.value, 1), t = new Date(i.value, h.value + 1, 0), a = t.getDate(), n = e.getDay(), r = t.getDay(), d = [];
-      let s = 1 - n;
-      for (; s <= a; ) {
-        const m = [];
-        for (let H = 0; H < 7; H++)
-          m.push({
-            day: s,
-            month: h.value,
-            year: i.value,
-            otherMonth: s < 1 || s > a,
-            today: s === L.getDate() && h.value === (/* @__PURE__ */ new Date()).getMonth() && i.value === (/* @__PURE__ */ new Date()).getFullYear(),
-            selectable: _e(
-              s,
-              h.value,
-              i.value
+      }
+      return years;
+    });
+    const viewDate = computed(() => {
+      let propValue;
+      if (calendarModelValue.value && isArraySelection(calendarModelValue.value)) {
+        propValue = calendarModelValue.value[getLastIndex(calendarModelValue.value)] || calendarModelValue.value[0];
+      } else {
+        propValue = calendarModelValue.value;
+      }
+      if (propValue && typeof propValue !== "string" && propValue.toString() !== "Invalid Date") {
+        return propValue;
+      }
+      const today = /* @__PURE__ */ new Date();
+      if (props.maxDate && props.maxDate < today) {
+        return props.maxDate;
+      }
+      if (props.minDate && props.minDate > today) {
+        return props.minDate;
+      }
+      return today;
+    });
+    const getLastIndex = (date) => {
+      if (date.length > 2) return date.length - 1;
+      return 1;
+    };
+    const getWeeksInMonth = () => {
+      const firstDayOfMonth = new Date(currentYear.value, currentMonth.value, 1);
+      const lastDayOfMonth = new Date(currentYear.value, currentMonth.value + 1, 0);
+      const daysInMonth = lastDayOfMonth.getDate();
+      const firstDayOfWeek = firstDayOfMonth.getDay();
+      const lastDayOfWeek = lastDayOfMonth.getDay();
+      const weeks = [];
+      let currentDay = 1 - firstDayOfWeek;
+      while (currentDay <= daysInMonth) {
+        const week = [];
+        for (let i = 0; i < 7; i++) {
+          week.push({
+            day: currentDay,
+            month: currentMonth.value,
+            year: currentYear.value,
+            otherMonth: currentDay < 1 || currentDay > daysInMonth,
+            today: currentDay === currentDate.getDate() && currentMonth.value === (/* @__PURE__ */ new Date()).getMonth() && currentYear.value === (/* @__PURE__ */ new Date()).getFullYear(),
+            selectable: isSelectable(
+              currentDay,
+              currentMonth.value,
+              currentYear.value
             )
-          }), s++;
-        d.push(m);
-      }
-      if (r !== 6) {
-        const m = d[d.length - 1];
-        let H = 1;
-        for (let T = r + 1; T < 7; T++)
-          m[T].day = H++, m[T].otherMonth = !0;
-      }
-      return d;
-    }, Re = () => {
-      h.value === 0 ? (i.value--, h.value = 11) : h.value--, R();
-    }, je = () => {
-      i.value--;
-    }, Te = () => {
-      i.value++;
-    }, Ue = () => {
-      h.value === 11 ? (Te(), h.value = 0) : h.value++, R();
-    }, qe = () => {
-      i.value -= 10;
-    }, ze = () => {
-      i.value += 10;
-    }, Ge = () => {
-      p.value === "date" ? Re() : p.value === "month" ? je() : qe();
-    }, Je = () => {
-      p.value === "date" ? Ue() : p.value === "month" ? Te() : ze();
-    }, R = () => {
-      De.value = Le();
-    }, E = () => o.value != null && typeof o.value != "string", K = (e) => l.selectionMode === "single" && (!Array.isArray(o.value) || o.value == null), C = () => l.selectionMode === "range" && (Array.isArray(o.value) || o.value == null), I = () => l.selectionMode === "multiple" && (Array.isArray(o.value) || o.value == null), ae = (e) => I() || C(), W = (e, t) => e ? e.getDate() === t.day && e.getMonth() === t.month && e.getFullYear() === t.year : !1, Qe = (e, t, a) => {
-      if (e && t) {
-        const r = new Date(a.year, a.month, a.day);
-        return e.getTime() <= r.getTime() && t.getTime() >= r.getTime();
-      }
-      return !1;
-    }, z = (e) => {
-      if (!E())
-        return !1;
-      if (o.value) {
-        if (K(o.value))
-          return W(o.value, e);
-        if (I())
-          return o.value.some(
-            (t) => W(t, e)
+          });
+          currentDay++;
+        }
+        weeks.push(week);
+      }
+      if (lastDayOfWeek !== 6) {
+        const lastWeek = weeks[weeks.length - 1];
+        let nextMonthDay = 1;
+        for (let i = lastDayOfWeek + 1; i < 7; i++) {
+          lastWeek[i].day = nextMonthDay++;
+          lastWeek[i].otherMonth = true;
+        }
+      }
+      return weeks;
+    };
+    const prevMonth = () => {
+      if (currentMonth.value === 0) {
+        currentYear.value--;
+        currentMonth.value = 11;
+      } else {
+        currentMonth.value--;
+      }
+      updateCalendar();
+    };
+    const decrementYear = () => {
+      currentYear.value--;
+    };
+    const incrementYear = () => {
+      currentYear.value++;
+    };
+    const nextMonth = () => {
+      if (currentMonth.value === 11) {
+        incrementYear();
+        currentMonth.value = 0;
+      } else {
+        currentMonth.value++;
+      }
+      updateCalendar();
+    };
+    const decrementDecade = () => {
+      currentYear.value -= 10;
+    };
+    const incrementDecade = () => {
+      currentYear.value += 10;
+    };
+    const navBackward = () => {
+      if (currentView.value === "date") {
+        prevMonth();
+      } else if (currentView.value === "month") {
+        decrementYear();
+      } else {
+        decrementDecade();
+      }
+    };
+    const navForward = () => {
+      if (currentView.value === "date") {
+        nextMonth();
+      } else if (currentView.value === "month") {
+        incrementYear();
+      } else {
+        incrementDecade();
+      }
+    };
+    const updateCalendar = () => {
+      weeksInMonth.value = getWeeksInMonth();
+    };
+    const isComparable = () => {
+      return calendarModelValue.value != null && typeof calendarModelValue.value !== "string";
+    };
+    const isSingleSelection = (value) => {
+      return props.selectionMode === "single" && (!Array.isArray(calendarModelValue.value) || calendarModelValue.value == null);
+    };
+    const isRangeSelection = () => {
+      return props.selectionMode === "range" && (Array.isArray(calendarModelValue.value) || calendarModelValue.value == null);
+    };
+    const isMultipleSelection = () => {
+      return props.selectionMode === "multiple" && (Array.isArray(calendarModelValue.value) || calendarModelValue.value == null);
+    };
+    const isArraySelection = (value) => {
+      return isMultipleSelection() || isRangeSelection();
+    };
+    const isDateEquals = (value, dateMeta) => {
+      if (value)
+        return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+      return false;
+    };
+    const isDateBetween = (start, end, dateMeta) => {
+      const between = false;
+      if (start && end) {
+        const date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+        return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+      }
+      return between;
+    };
+    const isSelected = (dateMeta) => {
+      if (!isComparable()) {
+        return false;
+      }
+      if (calendarModelValue.value) {
+        if (isSingleSelection(calendarModelValue.value)) {
+          return isDateEquals(calendarModelValue.value, dateMeta);
+        } else if (isMultipleSelection()) {
+          return calendarModelValue.value.some(
+            (dateIter) => isDateEquals(dateIter, dateMeta)
           );
-        if (C())
-          return o.value[b(o.value)] ? W(o.value[0], e) || W(
-            o.value[b(o.value)],
-            e
-          ) || Qe(
-            o.value[0],
-            o.value[b(o.value)],
-            e
-          ) : W(o.value[0], e);
-      }
-      return !1;
-    }, Xe = (e) => K(o.value) || I() ? z(e) : C() ? z(e) && (W(o.value[0], e) || o.value[0] == null) : !1, Ze = (e) => K(o.value) || I() ? z(e) : C() ? z(e) && (W(
-      o.value[b(o.value)],
-      e
-    ) || o.value[b(o.value)] == null) : !1, Se = (e) => {
-      if (E()) {
-        if (K(o.value))
-          return o.value.getMonth() === e && o.value.getFullYear() === i.value;
-        if (I())
-          return o.value.some(
-            (t) => t.getMonth() === e && t.getFullYear() === i.value
+        } else if (isRangeSelection()) {
+          if (calendarModelValue.value[getLastIndex(calendarModelValue.value)])
+            return isDateEquals(calendarModelValue.value[0], dateMeta) || isDateEquals(
+              calendarModelValue.value[getLastIndex(calendarModelValue.value)],
+              dateMeta
+            ) || isDateBetween(
+              calendarModelValue.value[0],
+              calendarModelValue.value[getLastIndex(calendarModelValue.value)],
+              dateMeta
+            );
+          return isDateEquals(calendarModelValue.value[0], dateMeta);
+        }
+      }
+      return false;
+    };
+    const isFirstSelected = (dateMeta) => {
+      if (isSingleSelection(calendarModelValue.value) || isMultipleSelection())
+        return isSelected(dateMeta);
+      else if (isRangeSelection())
+        return isSelected(dateMeta) && (isDateEquals(calendarModelValue.value[0], dateMeta) || calendarModelValue.value[0] == null);
+      return false;
+    };
+    const isLastSelected = (dateMeta) => {
+      if (isSingleSelection(calendarModelValue.value) || isMultipleSelection())
+        return isSelected(dateMeta);
+      else if (isRangeSelection())
+        return isSelected(dateMeta) && (isDateEquals(
+          calendarModelValue.value[getLastIndex(calendarModelValue.value)],
+          dateMeta
+        ) || calendarModelValue.value[getLastIndex(calendarModelValue.value)] == null);
+      return false;
+    };
+    const isMonthSelected = (month) => {
+      if (isComparable()) {
+        if (isSingleSelection(calendarModelValue.value)) {
+          return calendarModelValue.value.getMonth() === month && calendarModelValue.value.getFullYear() === currentYear.value;
+        }
+        if (isMultipleSelection())
+          return calendarModelValue.value.some(
+            (date) => date.getMonth() === month && date.getFullYear() === currentYear.value
           );
-        if (C()) {
-          const [t, a] = o.value;
-          if (t && a) {
-            const n = new Date(t.getFullYear(), t.getMonth()), r = new Date(a.getFullYear(), a.getMonth()), d = new Date(i.value, e);
-            return d >= n && d <= r;
+        if (isRangeSelection()) {
+          const [start, end] = calendarModelValue.value;
+          if (start && end) {
+            const startDate = new Date(start.getFullYear(), start.getMonth());
+            const endDate = new Date(end.getFullYear(), end.getMonth());
+            const currentMonthDate = new Date(currentYear.value, month);
+            return currentMonthDate >= startDate && currentMonthDate <= endDate;
           }
         }
       }
-      return !1;
-    }, $e = (e) => {
-      var t;
-      if (E()) {
-        if (K(o.value))
-          return ((t = o.value) == null ? void 0 : t.getFullYear()) === e;
-        if (I())
-          return o.value.some(
-            (a) => a.getFullYear() === e
+      return false;
+    };
+    const isYearSelected = (year) => {
+      var _a;
+      if (isComparable()) {
+        if (isSingleSelection(calendarModelValue.value))
+          return ((_a = calendarModelValue.value) == null ? void 0 : _a.getFullYear()) === year;
+        if (isMultipleSelection())
+          return calendarModelValue.value.some(
+            (date) => date.getFullYear() === year
           );
-        if (C()) {
-          const [a, n] = o.value;
-          return e >= a.getFullYear() && e <= (n ?? a).getFullYear();
+        if (isRangeSelection()) {
+          const [start, end] = calendarModelValue.value;
+          return year >= start.getFullYear() && year <= (end ?? start).getFullYear();
+        }
+      }
+      return false;
+    };
+    const isSelectable = (day, month, year) => {
+      let validMin = true;
+      let validMax = true;
+      let validWeekdays = true;
+      let validExcludes = true;
+      if (props.onlyWeekdays) {
+        const dayOfWeek = new Date(year, month, day).getDay();
+        validWeekdays = dayOfWeek >= 1 && dayOfWeek <= 5;
+      }
+      if (props.excludeDates) {
+        validExcludes = !props.excludeDates.some(
+          (excludeDate) => excludeDate.getFullYear() === year && excludeDate.getMonth() === month && excludeDate.getDate() === day
+        );
+      }
+      if (props.minDate) {
+        if (props.minDate.getFullYear() > year) {
+          validMin = false;
+        } else if (props.minDate.getFullYear() === year) {
+          if (props.minDate.getMonth() > month) {
+            validMin = false;
+          } else if (props.minDate.getMonth() === month) {
+            if (props.minDate.getDate() > day) {
+              validMin = false;
+            }
+          }
+        }
+      }
+      if (props.maxDate) {
+        if (props.maxDate.getFullYear() < year) {
+          validMax = false;
+        } else if (props.maxDate.getFullYear() === year) {
+          if (props.maxDate.getMonth() < month) {
+            validMax = false;
+          } else if (props.maxDate.getMonth() === month) {
+            if (props.maxDate.getDate() < day) {
+              validMax = false;
+            }
+          }
         }
       }
-      return !1;
-    }, _e = (e, t, a) => {
-      let n = !0, r = !0, d = !0, s = !0;
-      if (l.onlyWeekdays) {
-        const m = new Date(a, t, e).getDay();
-        d = m >= 1 && m <= 5;
-      }
-      return l.excludeDates && (s = !l.excludeDates.some(
-        (m) => m.getFullYear() === a && m.getMonth() === t && m.getDate() === e
-      )), l.minDate && (l.minDate.getFullYear() > a || l.minDate.getFullYear() === a && (l.minDate.getMonth() > t || l.minDate.getMonth() === t && l.minDate.getDate() > e)) && (n = !1), l.maxDate && (l.maxDate.getFullYear() < a || l.maxDate.getFullYear() === a && (l.maxDate.getMonth() < t || l.maxDate.getMonth() === t && l.maxDate.getDate() < e)) && (r = !1), n && r && d && s;
-    }, ce = (e, t) => {
-      e.currentTarget instanceof HTMLElement && e.currentTarget.focus(), t.selectable && ft(t), l.selectionMode === "single" && (!l.showTime || l.hideOnDateTimeSelect) && J();
-    }, et = (e, t) => {
-      t.selectable && (l.view === "month" ? ce(e, {
-        year: i.value,
-        month: t.value,
-        day: 1,
-        selectable: !0,
-        today: !1,
-        otherMonth: !1
-      }) : (h.value = t.value, p.value = "date", A("monthChange", {
-        month: h.value,
-        year: i.value
-      })), R());
-    }, tt = (e, t) => {
-      t.selectable && (l.view === "year" ? ce(e, {
-        year: t.value,
-        month: 0,
-        day: 1,
-        selectable: !0,
-        otherMonth: !1,
-        today: !1
-      }) : (i.value = t.value, p.value = "month", A("yearChange", {
-        month: h.value + 1,
-        year: i.value
-      })), R());
-    }, M = (e, t, a) => {
-      !l.disabled && !l.readonly && (Ce(e, null, t, a), e.preventDefault());
-    }, k = (e) => {
-      !l.disabled && !l.readonly && (me(), He(), e.preventDefault());
-    }, le = () => {
-      me();
-    }, ne = (e) => {
-      switch (e.code) {
+      return validMin && validMax && validWeekdays && validExcludes;
+    };
+    const onDateSelect = (event, date) => {
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.focus();
+      }
+      if (date.selectable) selectDate(date);
+      if (props.selectionMode === "single" && (!props.showTime || props.hideOnDateTimeSelect)) {
+        hidePanel();
+      }
+    };
+    const onMonthSelect = (event, monthMeta) => {
+      if (!monthMeta.selectable) return;
+      if (props.view === "month") {
+        onDateSelect(event, {
+          year: currentYear.value,
+          month: monthMeta.value,
+          day: 1,
+          selectable: true,
+          today: false,
+          otherMonth: false
+        });
+      } else {
+        currentMonth.value = monthMeta.value;
+        currentView.value = "date";
+        emit("monthChange", {
+          month: currentMonth.value,
+          year: currentYear.value
+        });
+      }
+      updateCalendar();
+    };
+    const onYearSelect = (event, year) => {
+      if (!year.selectable) return;
+      if (props.view === "year") {
+        onDateSelect(event, {
+          year: year.value,
+          month: 0,
+          day: 1,
+          selectable: true,
+          otherMonth: false,
+          today: false
+        });
+      } else {
+        currentYear.value = year.value;
+        currentView.value = "month";
+        emit("yearChange", {
+          month: currentMonth.value + 1,
+          year: currentYear.value
+        });
+      }
+      updateCalendar();
+    };
+    const onTimePickerElementMouseDown = (event, type, direction) => {
+      if (!props.disabled && !props.readonly) {
+        repeat(event, null, type, direction);
+        event.preventDefault();
+      }
+    };
+    const onTimePickerElementMouseUp = (event) => {
+      if (!props.disabled && !props.readonly) {
+        clearTimePickerTimer();
+        updateModelTime();
+        event.preventDefault();
+      }
+    };
+    const onTimePickerElementMouseLeave = () => {
+      clearTimePickerTimer();
+    };
+    const onContainerButtonKeydown = (event) => {
+      switch (event.code) {
         case "Tab":
           break;
         case "Escape":
-          J(), e.preventDefault();
+          hidePanel();
+          event.preventDefault();
           break;
       }
-    }, Fe = (e) => {
-      l.disabled || setTimeout(() => {
-        Z.value.show(e, Ye(e));
-      }, 0);
-    }, at = (e) => {
-      l.disabled || setTimeout(() => {
-        var t;
-        (t = Z.value) == null || t.toggle(e, Ye(e));
-      }, 0);
-    }, lt = () => {
-      p.value = l.view, fe(), _.value || Ie();
-    }, Ye = (e) => ("$el" in ue.value ? ue.value.$el : we.value) ?? e.currentTarget, Ce = (e, t, a, n) => {
-      switch (t || (t = 500), me(), de.value = setTimeout(() => {
-        Ce(e, 100, a, n);
-      }, t), a) {
+    };
+    const onInputClick = (event) => {
+      if (!props.disabled) {
+        setTimeout(() => {
+          overlayPanel.value.show(event, getOverlayTarget(event));
+        }, 0);
+      }
+    };
+    const onButtonTriggerClick = (event) => {
+      if (!props.disabled) {
+        setTimeout(() => {
+          var _a;
+          (_a = overlayPanel.value) == null ? void 0 : _a.toggle(event, getOverlayTarget(event));
+        }, 0);
+      }
+    };
+    const onPanelHide = () => {
+      currentView.value = props.view;
+      updateCurrentMetaData();
+      if (!changesSaved.value) {
+        revertChanges();
+      }
+    };
+    const getOverlayTarget = (event) => {
+      return ("$el" in wrapper.value ? wrapper.value.$el : input.value) ?? event.currentTarget;
+    };
+    const repeat = (event, interval, type, direction) => {
+      interval || (interval = 500);
+      clearTimePickerTimer();
+      timePickerTimer.value = setTimeout(() => {
+        repeat(event, 100, type, direction);
+      }, interval);
+      switch (type) {
         case 0:
-          n === 1 ? nt(e) : ot(e);
+          if (direction === 1) incrementHour(event);
+          else decrementHour(event);
           break;
         case 1:
-          n === 1 ? rt(e) : st(e);
+          if (direction === 1) incrementMinute(event);
+          else decrementMinute(event);
           break;
       }
-    }, nt = (e) => {
-      const t = v.value;
-      let a = v.value + Number(l.stepHour), n = y.value;
-      l.hourFormat == "24" ? a = a >= 24 ? a - 24 : a : l.hourFormat == "12" && (t < 12 && a > 11 && (n = !y.value), a = a >= 13 ? a - 12 : a), G(a, D.value, V.value, n) && (v.value = a, y.value = n), e.preventDefault();
-    }, ot = (e) => {
-      let t = v.value - l.stepHour, a = y.value;
-      l.hourFormat == "24" ? t = t < 0 ? 24 + t : t : l.hourFormat == "12" && (v.value === 12 && (a = !y.value), t = t <= 0 ? 12 + t : t), G(t, D.value, V.value, a) && (v.value = t, y.value = a), e.preventDefault();
-    }, rt = (e) => {
-      const t = D.value + Number(l.stepMinute);
-      G(v.value, t, V.value, y.value) && (D.value = t > 59 ? t - 60 : t), e.preventDefault();
-    }, st = (e) => {
-      let t = D.value - l.stepMinute;
-      t = t < 0 ? 60 + t : t, G(v.value, t, V.value, y.value) && (D.value = t), e.preventDefault();
-    }, me = () => {
-      de.value && clearInterval(de.value);
-    }, G = (e, t, a, n) => {
-      let r;
-      const d = ut(e, n);
-      if (ae(o.value)) {
-        const m = E() ? o.value : O.value;
-        r = m[b(m)] || m[0];
-      } else
-        r = E() ? o.value : O.value;
-      const s = r ? r.toDateString() : null;
-      return !(l.minDate && s && l.minDate.toDateString() === s && (l.minDate.getHours() > d || l.minDate.getHours() === d && (l.minDate.getMinutes() > t || l.minDate.getMinutes() === t && l.minDate.getSeconds() > a)) || l.maxDate && s && l.maxDate.toDateString() === s && (l.maxDate.getHours() < d || l.maxDate.getHours() === d && (l.maxDate.getMinutes() < t || l.maxDate.getMinutes() === t && l.maxDate.getSeconds() < a)));
-    }, ut = (e, t) => l.hourFormat == "12" ? e === 12 ? t ? 12 : 0 : t ? e + 12 : e : e, He = () => {
-      Me.value = !0;
-      let e;
-      if (ae(o.value)) {
-        const t = E() ? o.value : O.value;
-        e = t[b(t)] || t[0];
-      } else
-        e = E() ? o.value : O.value;
-      e = e && !Array.isArray(e) ? new Date(e.getTime()) : /* @__PURE__ */ new Date(), l.hourFormat == "12" ? v.value === 12 ? e.setHours(y.value ? 12 : 0) : e.setHours(y.value ? v.value + 12 : v.value) : e.setHours(v.value), e.setMinutes(D.value), e.setSeconds(V.value), ae(o.value) && (I() ? e = [...o.value] : C() && (o.value[b(o.value)] ? e = [o.value[0], e] : e = [e, null])), Ve(e), A("dateSelect", e), setTimeout(() => Me.value = !1, 0);
-    }, Be = (e) => e ? Array.isArray(e) ? e.map((a) => a == null ? void 0 : a.getTime()) : e.getTime() : null, Ve = (e) => {
-      l.showButtons || l.showTime ? (N.value = e, _.value = !1) : (A("update:epochTimeMillis", Be(e)), A("update:modelValue", e));
-    }, it = () => {
-      A("update:epochTimeMillis", Be(N.value)), A("update:modelValue", N.value), _.value = !0, J();
-    }, Ie = () => {
-      N.value = l.modelValue, _.value = !0, J();
-    }, dt = () => {
-      !G(
-        v.value,
-        D.value,
-        V.value,
-        !y.value
-      ) && (l.maxDate || l.minDate) || (y.value = !y.value, He());
-    }, fe = () => {
-      h.value = O.value.getMonth(), i.value = O.value.getFullYear(), l.showTime && vt(O.value);
-    }, vt = (e) => {
-      let t = e.getHours();
-      l.hourFormat === "12" && (y.value = t > 11, t >= 12 ? t = t == 12 ? 12 : t - 12 : t = t == 0 ? 12 : t), v.value = Math.floor(t / l.stepHour) * l.stepHour, D.value = Math.floor(e.getMinutes() / l.stepMinute) * l.stepMinute;
-    }, Pe = () => {
-      const e = l.showButtons || l.showTime ? N.value : o.value;
-      if (typeof e == "string")
-        return e;
-      let t = "";
-      if (e)
+    };
+    const incrementHour = (event) => {
+      const prevHour = currentHour.value;
+      let newHour = currentHour.value + Number(props.stepHour);
+      let newPM = pm.value;
+      if (props.hourFormat == "24")
+        newHour = newHour >= 24 ? newHour - 24 : newHour;
+      else if (props.hourFormat == "12") {
+        if (prevHour < 12 && newHour > 11) {
+          newPM = !pm.value;
+        }
+        newHour = newHour >= 13 ? newHour - 12 : newHour;
+      }
+      if (validateTime(newHour, currentMinute.value, currentSecond.value, newPM)) {
+        currentHour.value = newHour;
+        pm.value = newPM;
+      }
+      event.preventDefault();
+    };
+    const decrementHour = (event) => {
+      let newHour = currentHour.value - props.stepHour;
+      let newPM = pm.value;
+      if (props.hourFormat == "24") newHour = newHour < 0 ? 24 + newHour : newHour;
+      else if (props.hourFormat == "12") {
+        if (currentHour.value === 12) {
+          newPM = !pm.value;
+        }
+        newHour = newHour <= 0 ? 12 + newHour : newHour;
+      }
+      if (validateTime(newHour, currentMinute.value, currentSecond.value, newPM)) {
+        currentHour.value = newHour;
+        pm.value = newPM;
+      }
+      event.preventDefault();
+    };
+    const incrementMinute = (event) => {
+      const newMinute = currentMinute.value + Number(props.stepMinute);
+      if (validateTime(currentHour.value, newMinute, currentSecond.value, pm.value)) {
+        currentMinute.value = newMinute > 59 ? newMinute - 60 : newMinute;
+      }
+      event.preventDefault();
+    };
+    const decrementMinute = (event) => {
+      let newMinute = currentMinute.value - props.stepMinute;
+      newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
+      if (validateTime(currentHour.value, newMinute, currentSecond.value, pm.value)) {
+        currentMinute.value = newMinute;
+      }
+      event.preventDefault();
+    };
+    const clearTimePickerTimer = () => {
+      if (timePickerTimer.value) {
+        clearInterval(timePickerTimer.value);
+      }
+    };
+    const validateTime = (hour, minute, second, isPm) => {
+      let value;
+      const convertedHour = convertTo24Hour(hour, isPm);
+      if (isArraySelection(calendarModelValue.value)) {
+        const modelValue = isComparable() ? calendarModelValue.value : viewDate.value;
+        value = modelValue[getLastIndex(modelValue)] || modelValue[0];
+      } else {
+        value = isComparable() ? calendarModelValue.value : viewDate.value;
+      }
+      const valueDateString = value ? value.toDateString() : null;
+      if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
+        if (props.minDate.getHours() > convertedHour) {
+          return false;
+        }
+        if (props.minDate.getHours() === convertedHour) {
+          if (props.minDate.getMinutes() > minute) {
+            return false;
+          }
+          if (props.minDate.getMinutes() === minute) {
+            if (props.minDate.getSeconds() > second) {
+              return false;
+            }
+          }
+        }
+      }
+      if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
+        if (props.maxDate.getHours() < convertedHour) {
+          return false;
+        }
+        if (props.maxDate.getHours() === convertedHour) {
+          if (props.maxDate.getMinutes() < minute) {
+            return false;
+          }
+          if (props.maxDate.getMinutes() === minute) {
+            if (props.maxDate.getSeconds() < second) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
+    const convertTo24Hour = (hours, isPm) => {
+      if (props.hourFormat == "12") {
+        if (hours === 12) return isPm ? 12 : 0;
+        return isPm ? hours + 12 : hours;
+      }
+      return hours;
+    };
+    const updateModelTime = () => {
+      timePickerChange.value = true;
+      let value;
+      if (isArraySelection(calendarModelValue.value)) {
+        const modelValue = isComparable() ? calendarModelValue.value : viewDate.value;
+        value = modelValue[getLastIndex(modelValue)] || modelValue[0];
+      } else {
+        value = isComparable() ? calendarModelValue.value : viewDate.value;
+      }
+      value = value && !Array.isArray(value) ? new Date(value.getTime()) : /* @__PURE__ */ new Date();
+      if (props.hourFormat == "12") {
+        if (currentHour.value === 12) value.setHours(pm.value ? 12 : 0);
+        else value.setHours(pm.value ? currentHour.value + 12 : currentHour.value);
+      } else {
+        value.setHours(currentHour.value);
+      }
+      value.setMinutes(currentMinute.value);
+      value.setSeconds(currentSecond.value);
+      if (isArraySelection(calendarModelValue.value)) {
+        if (isMultipleSelection()) {
+          value = [...calendarModelValue.value];
+        } else if (isRangeSelection()) {
+          if (calendarModelValue.value[getLastIndex(calendarModelValue.value)])
+            value = [calendarModelValue.value[0], value];
+          else value = [value, null];
+        }
+      }
+      updateModel(value);
+      emit("dateSelect", value);
+      setTimeout(() => timePickerChange.value = false, 0);
+    };
+    const getMillisTime = (value) => {
+      const millisValue = value ? Array.isArray(value) ? value.map((v) => v == null ? void 0 : v.getTime()) : value.getTime() : null;
+      return millisValue;
+    };
+    const updateModel = (value) => {
+      if (props.showButtons || props.showTime) {
+        temporaryDate.value = value;
+        changesSaved.value = false;
+      } else {
+        emit("update:epochTimeMillis", getMillisTime(value));
+        emit("update:modelValue", value);
+      }
+    };
+    const applyChanges = () => {
+      emit("update:epochTimeMillis", getMillisTime(temporaryDate.value));
+      emit("update:modelValue", temporaryDate.value);
+      changesSaved.value = true;
+      hidePanel();
+    };
+    const revertChanges = () => {
+      temporaryDate.value = props.modelValue;
+      changesSaved.value = true;
+      hidePanel();
+    };
+    const toggleAMPM = () => {
+      const validHour = validateTime(
+        currentHour.value,
+        currentMinute.value,
+        currentSecond.value,
+        !pm.value
+      );
+      if (!validHour && (props.maxDate || props.minDate)) return;
+      pm.value = !pm.value;
+      updateModelTime();
+    };
+    const updateCurrentMetaData = () => {
+      currentMonth.value = viewDate.value.getMonth();
+      currentYear.value = viewDate.value.getFullYear();
+      if (props.showTime) {
+        updateCurrentTimeMeta(viewDate.value);
+      }
+    };
+    const updateCurrentTimeMeta = (date) => {
+      let hour = date.getHours();
+      if (props.hourFormat === "12") {
+        pm.value = hour > 11;
+        if (hour >= 12) hour = hour == 12 ? 12 : hour - 12;
+        else hour = hour == 0 ? 12 : hour;
+      }
+      currentHour.value = Math.floor(hour / props.stepHour) * props.stepHour;
+      currentMinute.value = Math.floor(date.getMinutes() / props.stepMinute) * props.stepMinute;
+    };
+    const formatValue = () => {
+      const value = props.showButtons || props.showTime ? temporaryDate.value : calendarModelValue.value;
+      if (typeof value === "string") {
+        return value;
+      }
+      let formattedValue = "";
+      if (value) {
         try {
-          if (K(e))
-            e.toString() !== "Invalid Date" && (t = oe(e));
-          else if (I())
-            e && e.length && (t = e.map((a) => oe(a)).join(", "));
-          else if (C() && e && e.length) {
-            const a = e[0], n = e[b(e)];
-            a.toString() !== "Invalid Date" && (t = oe(a)), n && n.toString() !== "Invalid Date" && (t += " - " + oe(n));
+          if (isSingleSelection(value)) {
+            if (value.toString() !== "Invalid Date")
+              formattedValue = formatDateTime(value);
+          } else if (isMultipleSelection()) {
+            if (value && value.length) {
+              formattedValue = value.map((date) => formatDateTime(date)).join(", ");
+            }
+          } else if (isRangeSelection()) {
+            if (value && value.length) {
+              const startDate = value[0];
+              const endDate = value[getLastIndex(value)];
+              if (startDate.toString() !== "Invalid Date") {
+                formattedValue = formatDateTime(startDate);
+              }
+              if (endDate && endDate.toString() !== "Invalid Date") {
+                formattedValue += " - " + formatDateTime(endDate);
+              }
+            }
           }
         } catch {
-          t = e.toString();
+          formattedValue = value.toString();
+        }
+      }
+      return formattedValue;
+    };
+    const formatDateTime = (date) => {
+      let formattedValue = null;
+      if (date) {
+        formattedValue = formatDate(date, datePattern.value);
+        if (props.showTime) {
+          formattedValue += " " + formatTime(date);
         }
-      return t;
-    }, oe = (e) => {
-      let t = null;
-      return e && (t = ct(e, Ke.value), l.showTime && (t += " " + mt(e))), t;
-    }, ct = (e, t) => {
-      if (!e)
+      }
+      return formattedValue;
+    };
+    const formatDate = (date, format) => {
+      if (!date) {
         return "";
-      let a;
-      const n = (H) => {
-        const T = a + 1 < t.length && t.charAt(a + 1) === H;
-        return T && a++, T;
-      }, r = (H, T, pe) => {
-        let j = "" + T;
-        if (n(H))
-          for (; j.length < pe; )
-            j = "0" + j;
-        return j;
-      }, d = (H, T, pe, j) => n(H) ? j[T] : pe[T];
-      let s = "", m = !1;
-      if (e)
-        for (a = 0; a < t.length; a++)
-          if (m)
-            t.charAt(a) === "'" && !n("'") ? m = !1 : s += t.charAt(a);
-          else
-            switch (t.charAt(a)) {
+      }
+      let iFormat;
+      const lookAhead = (match) => {
+        const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+        if (matches) {
+          iFormat++;
+        }
+        return matches;
+      };
+      const formatNumber = (match, value, len) => {
+        let num = "" + value;
+        if (lookAhead(match)) {
+          while (num.length < len) {
+            num = "0" + num;
+          }
+        }
+        return num;
+      };
+      const formatName = (match, value, shortNames, longNames) => {
+        return lookAhead(match) ? longNames[value] : shortNames[value];
+      };
+      let output = "";
+      let literal = false;
+      if (date) {
+        for (iFormat = 0; iFormat < format.length; iFormat++) {
+          if (literal) {
+            if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+              literal = false;
+            } else {
+              output += format.charAt(iFormat);
+            }
+          } else {
+            switch (format.charAt(iFormat)) {
               case "d":
-                s += r("d", e.getDate(), 2);
+                output += formatNumber("d", date.getDate(), 2);
                 break;
               case "D":
-                s += d(
+                output += formatName(
                   "D",
-                  e.getDay(),
-                  Y.locale.global.dayNamesShort,
-                  Y.locale.global.dayNames
+                  date.getDay(),
+                  config.locale.global.dayNamesShort,
+                  config.locale.global.dayNames
                 );
                 break;
               case "o":
-                s += r(
+                output += formatNumber(
                   "o",
                   Math.round(
                     (new Date(
-                      e.getFullYear(),
-                      e.getMonth(),
-                      e.getDate()
-                    ).getTime() - new Date(e.getFullYear(), 0, 0).getTime()) / 864e5
+                      date.getFullYear(),
+                      date.getMonth(),
+                      date.getDate()
+                    ).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5
                   ),
                   3
                 );
                 break;
               case "m":
-                s += r("m", e.getMonth() + 1, 2);
+                output += formatNumber("m", date.getMonth() + 1, 2);
                 break;
               case "M":
-                s += d(
+                output += formatName(
                   "M",
-                  e.getMonth(),
-                  Y.locale.global.monthNamesShort,
-                  Y.locale.global.monthNames
+                  date.getMonth(),
+                  config.locale.global.monthNamesShort,
+                  config.locale.global.monthNames
                 );
                 break;
               case "y":
-                s += n("y") ? e.getFullYear() : (e.getFullYear() % 100 < 10 ? "0" : "") + e.getFullYear() % 100;
+                output += lookAhead("y") ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? "0" : "") + date.getFullYear() % 100;
                 break;
               case "@":
-                s += e.getTime();
+                output += date.getTime();
                 break;
               case "!":
-                s += e.getTime() * 1e4 + Ne;
+                output += date.getTime() * 1e4 + ticksTo1970;
                 break;
               case "'":
-                n("'") ? s += "'" : m = !0;
+                if (lookAhead("'")) {
+                  output += "'";
+                } else {
+                  literal = true;
+                }
                 break;
               default:
-                s += t.charAt(a);
+                output += format.charAt(iFormat);
             }
-      return s;
-    }, mt = (e) => {
-      if (!e)
+          }
+        }
+      }
+      return output;
+    };
+    const formatTime = (date) => {
+      if (!date) {
         return "";
-      let t = "", a = e.getHours();
-      const n = e.getMinutes();
-      return l.hourFormat === "12" && a > 11 && a !== 12 && (a -= 12), l.hourFormat === "12" ? t += a === 0 ? 12 : a < 10 ? "0" + a : a : t += a < 10 ? "0" + a : a, t += ":", t += n < 10 ? "0" + n : n, l.hourFormat === "12" && (t += e.getHours() > 11 ? ` ${Y.locale.global.pm}` : ` ${Y.locale.global.am}`), t;
-    }, ft = (e) => {
-      let t = new Date(e.year, e.month, e.day);
-      l.showTime && (t.setHours(
-        v.value + (l.hourFormat === "12" && v.value !== 12 && y.value ? 12 : 0)
-      ), t.setMinutes(D.value), t.setSeconds(V.value)), l.minDate && l.minDate > t && (t = l.minDate, v.value = t.getHours(), D.value = t.getMinutes(), V.value = t.getSeconds()), l.maxDate && l.maxDate < t && (t = l.maxDate, v.value = t.getHours(), D.value = t.getMinutes(), V.value = t.getSeconds());
-      let a = null;
-      if (K(o.value))
-        a = t;
-      else if (I()) {
-        let n = o.value;
-        if (n && n.length) {
-          const r = n.findIndex(
-            (d) => d.getFullYear() === t.getFullYear() && d.getMonth() === t.getMonth() && d.getDate() === t.getDate()
+      }
+      let output = "";
+      let hours = date.getHours();
+      const minutes = date.getMinutes();
+      if (props.hourFormat === "12" && hours > 11 && hours !== 12) {
+        hours -= 12;
+      }
+      if (props.hourFormat === "12") {
+        output += hours === 0 ? 12 : hours < 10 ? "0" + hours : hours;
+      } else {
+        output += hours < 10 ? "0" + hours : hours;
+      }
+      output += ":";
+      output += minutes < 10 ? "0" + minutes : minutes;
+      if (props.hourFormat === "12") {
+        output += date.getHours() > 11 ? ` ${config.locale.global.pm}` : ` ${config.locale.global.am}`;
+      }
+      return output;
+    };
+    const selectDate = (dateMeta) => {
+      let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+      if (props.showTime) {
+        date.setHours(
+          currentHour.value + (props.hourFormat === "12" && currentHour.value !== 12 && pm.value ? 12 : 0)
+        );
+        date.setMinutes(currentMinute.value);
+        date.setSeconds(currentSecond.value);
+      }
+      if (props.minDate && props.minDate > date) {
+        date = props.minDate;
+        currentHour.value = date.getHours();
+        currentMinute.value = date.getMinutes();
+        currentSecond.value = date.getSeconds();
+      }
+      if (props.maxDate && props.maxDate < date) {
+        date = props.maxDate;
+        currentHour.value = date.getHours();
+        currentMinute.value = date.getMinutes();
+        currentSecond.value = date.getSeconds();
+      }
+      let modelVal = null;
+      if (isSingleSelection(calendarModelValue.value)) {
+        modelVal = date;
+      } else if (isMultipleSelection()) {
+        let selectedDates = calendarModelValue.value;
+        if (selectedDates && selectedDates.length) {
+          const dateIndex = selectedDates.findIndex(
+            (each) => each.getFullYear() === date.getFullYear() && each.getMonth() === date.getMonth() && each.getDate() === date.getDate()
           );
-          r !== -1 ? n.splice(r, 1) : n = [...n, t], n.sort((d, s) => d.getTime() - s.getTime());
-        } else n = [t];
-        a = n;
-      } else if (l.exactSelection)
-        a = gt(e, t);
-      else if (C())
-        if (o.value && o.value.length) {
-          let n = o.value[0], r = o.value[b(o.value)];
-          !r && t.getTime() >= n.getTime() ? r = t : (n = t, r = null), a = [n, r];
-        } else
-          a = [t, null];
-      a !== null && Ve(a), pt(a), A("dateSelect", t);
-    }, pt = (e) => {
-      const t = l.exactSelection ? e.length > 1 : e && e[b(e)] !== null;
-      C() && l.hideOnRangeSelection && !l.showButtons && !l.showTime && t && J();
-    }, gt = (e, t) => {
-      const a = ve.value;
-      if (!ve.value || a.day === e.day)
-        return ve.value = e, ke.value = ee.value, [t];
-      const n = a.month === e.month ? ee.value.filter((r) => r.day > a.day && r.day < e.day).map((r) => new Date(r.year, r.month, r.day)) : [
-        ...ke.value.filter((r) => !r.otherMonth && r.day > a.day).map((r) => new Date(r.year, r.month, r.day)),
-        ...ee.value.filter((r) => !r.otherMonth && r.day < e.day).map((r) => new Date(r.year, r.month, r.day))
+          if (dateIndex !== -1) {
+            selectedDates.splice(dateIndex, 1);
+          } else selectedDates = [...selectedDates, date];
+          selectedDates.sort((a, b) => a.getTime() - b.getTime());
+        } else selectedDates = [date];
+        modelVal = selectedDates;
+      } else if (props.exactSelection) {
+        modelVal = formattingExactSelection(dateMeta, date);
+      } else if (isRangeSelection()) {
+        if (calendarModelValue.value && calendarModelValue.value.length) {
+          let startDate = calendarModelValue.value[0];
+          let endDate = calendarModelValue.value[getLastIndex(calendarModelValue.value)];
+          if (!endDate && date.getTime() >= startDate.getTime()) {
+            endDate = date;
+          } else {
+            startDate = date;
+            endDate = null;
+          }
+          modelVal = [startDate, endDate];
+        } else {
+          modelVal = [date, null];
+        }
+      }
+      if (modelVal !== null) {
+        updateModel(modelVal);
+      }
+      hideOverlayRangeSelection(modelVal);
+      emit("dateSelect", date);
+    };
+    const hideOverlayRangeSelection = (modelVal) => {
+      const isCompleteRangeSelection = !props.exactSelection ? modelVal && modelVal[getLastIndex(modelVal)] !== null : modelVal.length > 1;
+      if (isRangeSelection() && props.hideOnRangeSelection && !props.showButtons && !props.showTime && isCompleteRangeSelection) {
+        hidePanel();
+      }
+    };
+    const formattingExactSelection = (dateMeta, date) => {
+      const startDate = previousDateMeta.value;
+      if (!previousDateMeta.value || startDate.day === dateMeta.day) {
+        previousDateMeta.value = dateMeta;
+        previousDatesInMonth.value = datesInMonth.value;
+        return [date];
+      }
+      const restDate = startDate.month === dateMeta.month ? datesInMonth.value.filter((each) => each.day > startDate.day && each.day < dateMeta.day).map((each) => new Date(each.year, each.month, each.day)) : [
+        ...previousDatesInMonth.value.filter((each) => !each.otherMonth && each.day > startDate.day).map((each) => new Date(each.year, each.month, each.day)),
+        ...datesInMonth.value.filter((each) => !each.otherMonth && each.day < dateMeta.day).map((each) => new Date(each.year, each.month, each.day))
       ];
       return [
-        new Date(a.year, a.month, a.day),
-        ...n,
-        t
+        new Date(startDate.year, startDate.month, startDate.day),
+        ...restDate,
+        date
       ];
-    }, J = () => {
+    };
+    const hidePanel = () => {
       setTimeout(() => {
-        var e;
-        (e = Z.value) == null || e.hide();
+        var _a;
+        (_a = overlayPanel.value) == null ? void 0 : _a.hide();
       }, 150);
     };
-    return ge(
+    watch(
       () => [
-        l.minDate,
-        l.maxDate,
-        l.excludeDates,
-        l.maxYear,
-        l.maxMonth
+        props.minDate,
+        props.maxDate,
+        props.excludeDates,
+        props.maxYear,
+        props.maxMonth
       ],
-      () => R()
-    ), ge(
-      () => o.value,
+      () => updateCalendar()
+    );
+    watch(
+      () => calendarModelValue.value,
       () => {
-        fe(), ie.value = Pe();
+        updateCurrentMetaData();
+        inputValue.value = formatValue();
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), (l.showButtons || l.showTime) && ge(
-      N,
-      () => {
-        fe(), ie.value = Pe();
-      },
-      {
-        immediate: !0,
-        deep: !0
-      }
-    ), (e, t) => (c(), he(Ft, {
-      ref_key: "wrapper",
-      ref: ue,
-      info: e.fieldInfo,
-      label: e.label,
-      mandatory: e.mandatory,
-      "show-optional-text": e.showOptionalText
-    }, {
-      default: ye(() => [
-        U(e.$slots, "default", { onClick: Fe }, () => [
-          S(Yt, { disabled: e.disabled }, {
-            default: ye(() => [
-              f("span", u(e.$preset.calendar.root({ props: l }), {
-                id: e.id,
-                "data-wv-name": "calendar",
-                "data-wv-section": "root"
-              }), [
-                f("input", u({
-                  id: e.inputId,
-                  ref_key: "input",
-                  ref: we,
-                  "aria-invalid": e.invalid || void 0,
-                  disabled: e.disabled,
-                  placeholder: e.placeholder ?? q(Y).locale.defaultPlaceholder,
-                  tabindex: 0,
-                  value: ie.value,
-                  onClick: Fe,
-                  "aria-autocomplete": "none",
-                  autocomplete: "off",
-                  inputmode: "none",
-                  readonly: "",
-                  role: "combobox",
-                  type: "text"
-                }, e.$preset.calendar.input({ props: l })), null, 16, Bt),
-                S(X, u({
-                  onClick: at,
-                  icon: "calendar"
-                }, e.$preset.calendar.inputicon), null, 16)
-              ], 16, Ht)
-            ]),
-            _: 1
-          }, 8, ["disabled"])
-        ]),
-        S(q(Tt), {
-          ref_key: "overlayPanel",
-          ref: Z,
-          pt: {
-            root: {
-              class: [e.$preset.overlaypanel.root.class, "!mt-0", l.overlayClass]
-            }
-          },
-          onHide: lt
-        }, {
-          default: ye(() => [
-            f("div", u(e.$preset.calendar.panel({ props: l }), { "data-wv-section": "panel" }), [
-              f("div", u(e.$preset.calendar.container, { "data-wv-section": "container" }), [
-                f("div", u(e.$preset.calendar.header({ props: l, state: { currentView: p.value } }), { "data-wv-section": "navigation" }), [
-                  S(se, {
-                    onClick: Ge,
-                    class: "rotate-180 !p-1",
-                    "data-wv-section": "prevbutton",
-                    icon: "arrow-right",
-                    "icon-class": "w-5 h-5",
-                    severity: "secondary",
-                    text: ""
-                  }),
-                  f("div", Vt, [
-                    p.value == "date" ? (c(), g("button", u({ key: 0 }, e.$preset.calendar.monthTitle, {
-                      onClick: t[0] || (t[0] = (a) => p.value = "month")
-                    }), F(e.$wangsvue.config.locale.global.monthNamesShort[h.value]), 17)) : $("", !0),
-                    p.value != "year" ? (c(), g("button", u({ key: 1 }, e.$preset.calendar.yearTitle({ props: l }), {
-                      onClick: t[1] || (t[1] = (a) => p.value = "year")
-                    }), F(i.value), 17)) : $("", !0),
-                    p.value == "year" ? (c(), g("span", It, F(te.value[0].value) + " - " + F(te.value[te.value.length - 1].value), 1)) : $("", !0)
-                  ]),
-                  S(se, {
-                    onClick: Je,
-                    class: "!p-1",
-                    "data-wv-section": "nextbutton",
-                    icon: "arrow-right",
-                    "icon-class": "w-5 h-5",
-                    severity: "secondary",
-                    text: ""
-                  })
-                ], 16),
-                p.value === "date" ? (c(), g("div", Pt, [
-                  f("div", At, [
-                    f("div", xt, [
-                      (c(!0), g(Q, null, re(e.$wangsvue.config.locale.global.dayNamesShort, (a) => (c(), g("span", {
-                        key: a,
-                        abbr: "day",
-                        class: "text-center",
-                        "data-wv-section": "weekday"
-                      }, F(a), 1))), 128))
+    );
+    if (props.showButtons || props.showTime) {
+      watch(
+        temporaryDate,
+        () => {
+          updateCurrentMetaData();
+          inputValue.value = formatValue();
+        },
+        {
+          immediate: true,
+          deep: true
+        }
+      );
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        ref_key: "wrapper",
+        ref: wrapper,
+        info: _ctx.fieldInfo,
+        label: _ctx.label,
+        mandatory: _ctx.mandatory,
+        "show-optional-text": _ctx.showOptionalText
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { onClick: onInputClick }, () => [
+            createVNode(_sfc_main$2, { disabled: _ctx.disabled }, {
+              default: withCtx(() => [
+                createElementVNode("span", mergeProps(_ctx.$preset.calendar.root({ props }), {
+                  id: _ctx.id,
+                  "data-wv-name": "calendar",
+                  "data-wv-section": "root"
+                }), [
+                  createElementVNode("input", mergeProps({
+                    id: _ctx.inputId,
+                    ref_key: "input",
+                    ref: input,
+                    "aria-invalid": _ctx.invalid || void 0,
+                    disabled: _ctx.disabled,
+                    placeholder: _ctx.placeholder ?? unref(config).locale.defaultPlaceholder,
+                    tabindex: 0,
+                    value: inputValue.value,
+                    onClick: onInputClick,
+                    "aria-autocomplete": "none",
+                    autocomplete: "off",
+                    inputmode: "none",
+                    readonly: "",
+                    role: "combobox",
+                    type: "text"
+                  }, _ctx.$preset.calendar.input({ props })), null, 16, _hoisted_2),
+                  createVNode(_sfc_main$3, mergeProps({
+                    onClick: onButtonTriggerClick,
+                    icon: "calendar"
+                  }, _ctx.$preset.calendar.inputicon), null, 16)
+                ], 16, _hoisted_1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          createVNode(unref(script), {
+            ref_key: "overlayPanel",
+            ref: overlayPanel,
+            pt: {
+              root: {
+                class: [_ctx.$preset.overlaypanel.root.class, "!mt-0", props.overlayClass]
+              }
+            },
+            onHide: onPanelHide
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", mergeProps(_ctx.$preset.calendar.panel({ props }), { "data-wv-section": "panel" }), [
+                createElementVNode("div", mergeProps(_ctx.$preset.calendar.container, { "data-wv-section": "container" }), [
+                  createElementVNode("div", mergeProps(_ctx.$preset.calendar.header({ props, state: { currentView: currentView.value } }), { "data-wv-section": "navigation" }), [
+                    createVNode(_sfc_main$4, {
+                      onClick: navBackward,
+                      class: "rotate-180 !p-1",
+                      "data-wv-section": "prevbutton",
+                      icon: "arrow-right",
+                      "icon-class": "w-5 h-5",
+                      severity: "secondary",
+                      text: ""
+                    }),
+                    createElementVNode("div", _hoisted_3, [
+                      currentView.value == "date" ? (openBlock(), createElementBlock("button", mergeProps({ key: 0 }, _ctx.$preset.calendar.monthTitle, {
+                        onClick: _cache[0] || (_cache[0] = ($event) => currentView.value = "month")
+                      }), toDisplayString(_ctx.$wangsvue.config.locale.global.monthNamesShort[currentMonth.value]), 17)) : createCommentVNode("", true),
+                      currentView.value != "year" ? (openBlock(), createElementBlock("button", mergeProps({ key: 1 }, _ctx.$preset.calendar.yearTitle({ props }), {
+                        onClick: _cache[1] || (_cache[1] = ($event) => currentView.value = "year")
+                      }), toDisplayString(currentYear.value), 17)) : createCommentVNode("", true),
+                      currentView.value == "year" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(yearPickerValues.value[0].value) + " - " + toDisplayString(yearPickerValues.value[yearPickerValues.value.length - 1].value), 1)) : createCommentVNode("", true)
+                    ]),
+                    createVNode(_sfc_main$4, {
+                      onClick: navForward,
+                      class: "!p-1",
+                      "data-wv-section": "nextbutton",
+                      icon: "arrow-right",
+                      "icon-class": "w-5 h-5",
+                      severity: "secondary",
+                      text: ""
+                    })
+                  ], 16),
+                  currentView.value === "date" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    createElementVNode("div", _hoisted_6, [
+                      createElementVNode("div", _hoisted_7, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.$wangsvue.config.locale.global.dayNamesShort, (day) => {
+                          return openBlock(), createElementBlock("span", {
+                            key: day,
+                            abbr: "day",
+                            class: "text-center",
+                            "data-wv-section": "weekday"
+                          }, toDisplayString(day), 1);
+                        }), 128))
+                      ])
+                    ]),
+                    createElementVNode("div", _hoisted_8, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(datesInMonth.value, (date, dayIndex) => {
+                        return openBlock(), createElementBlock("span", {
+                          key: dayIndex,
+                          "aria-label": date.day.toString(),
+                          "data-wv-other-month": date.otherMonth,
+                          "data-wv-today": date.today,
+                          "data-wv-section": "day"
+                        }, [
+                          isLoading.value && !date.otherMonth ? (openBlock(), createBlock(unref(script$1), {
+                            key: 0,
+                            class: "!w-8 !h-8",
+                            shape: "circle"
+                          })) : !isLoading.value ? (openBlock(), createElementBlock("span", mergeProps(
+                            {
+                              key: 1,
+                              "aria-disabled": !date.selectable,
+                              "data-p-disabled": date.otherMonth || !date.selectable,
+                              onClick: ($event) => onDateSelect($event, date),
+                              ref_for: true
+                            },
+                            _ctx.$preset.calendar.daylabel({
+                              context: {
+                                date,
+                                today: date.today,
+                                otherMonth: date.otherMonth,
+                                selected: isSelected(date),
+                                firstSelected: isFirstSelected(date),
+                                lastSelected: isLastSelected(date),
+                                disabled: !date.selectable
+                              }
+                            }),
+                            {
+                              "data-wv-section": "daylabel",
+                              draggable: "false",
+                              tabindex: "0"
+                            }
+                          ), [
+                            !date.otherMonth ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                              createTextVNode(toDisplayString(date.day), 1)
+                            ], 64)) : createCommentVNode("", true)
+                          ], 16, _hoisted_10)) : createCommentVNode("", true)
+                        ], 8, _hoisted_9);
+                      }), 128))
                     ])
-                  ]),
-                  f("div", Nt, [
-                    (c(!0), g(Q, null, re(ee.value, (a, n) => (c(), g("span", {
-                      key: n,
-                      "aria-label": a.day.toString(),
-                      "data-wv-other-month": a.otherMonth,
-                      "data-wv-today": a.today,
-                      "data-wv-section": "day"
-                    }, [
-                      be.value && !a.otherMonth ? (c(), he(q($t), {
-                        key: 0,
-                        class: "!w-8 !h-8",
-                        shape: "circle"
-                      })) : be.value ? $("", !0) : (c(), g("span", u(
+                  ])) : createCommentVNode("", true),
+                  currentView.value === "month" ? (openBlock(), createElementBlock("div", mergeProps({
+                    key: 1,
+                    "data-wv-section": "monthpicker"
+                  }, _ctx.$preset.calendar.monthpicker), [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(monthPickerValues.value, (m, i) => {
+                      return openBlock(), createElementBlock("span", mergeProps(
                         {
-                          key: 1,
-                          "aria-disabled": !a.selectable,
-                          "data-p-disabled": a.otherMonth || !a.selectable,
-                          onClick: (r) => ce(r, a),
-                          ref_for: !0
+                          key: m.value,
+                          ref_for: true
                         },
-                        e.$preset.calendar.daylabel({
+                        _ctx.$preset.calendar.month({
                           context: {
-                            date: a,
-                            today: a.today,
-                            otherMonth: a.otherMonth,
-                            selected: z(a),
-                            firstSelected: Xe(a),
-                            lastSelected: Ze(a),
-                            disabled: !a.selectable
+                            month: m,
+                            monthIndex: i,
+                            selected: isMonthSelected(i),
+                            disabled: !m.selectable
                           }
                         }),
                         {
-                          "data-wv-section": "daylabel",
-                          draggable: "false",
-                          tabindex: "0"
+                          "data-p-disabled": !m.selectable,
+                          "data-p-highlight": isMonthSelected(i),
+                          onClick: ($event) => onMonthSelect($event, m)
                         }
-                      ), [
-                        a.otherMonth ? $("", !0) : (c(), g(Q, { key: 0 }, [
-                          Dt(F(a.day), 1)
-                        ], 64))
-                      ], 16, Et))
-                    ], 8, Ot))), 128))
-                  ])
-                ])) : $("", !0),
-                p.value === "month" ? (c(), g("div", u({
-                  key: 1,
-                  "data-wv-section": "monthpicker"
-                }, e.$preset.calendar.monthpicker), [
-                  (c(!0), g(Q, null, re(We.value, (a, n) => (c(), g("span", u(
-                    {
-                      key: a.value,
-                      ref_for: !0
-                    },
-                    e.$preset.calendar.month({
-                      context: {
-                        month: a,
-                        monthIndex: n,
-                        selected: Se(n),
-                        disabled: !a.selectable
-                      }
-                    }),
-                    {
-                      "data-p-disabled": !a.selectable,
-                      "data-p-highlight": Se(n),
-                      onClick: (r) => et(r, a)
-                    }
-                  ), F(e.$wangsvue.config.locale.global.monthNamesShort[a.value]), 17, Kt))), 128))
-                ], 16)) : $("", !0),
-                p.value === "year" ? (c(), g("div", bt(u({ key: 2 }, e.$preset.calendar.yearpicker)), [
-                  (c(!0), g(Q, null, re(te.value, (a) => (c(), g("span", u(
-                    {
-                      key: a.value,
-                      ref_for: !0
-                    },
-                    e.$preset.calendar.year({
-                      context: {
-                        year: a,
-                        selected: $e(a.value),
-                        disabled: !a.selectable
-                      }
-                    }),
-                    {
-                      "data-p-disabled": !a.selectable,
-                      "data-p-highlight": $e(a.value),
-                      onClick: (n) => tt(n, a)
-                    }
-                  ), F(a.value), 17, Wt))), 128))
-                ], 16)) : $("", !0)
-              ], 16),
-              e.showTime && p.value === "date" ? (c(), g("div", u({ key: 0 }, e.$preset.calendar.timepicker, { "data-wv-section": "timepicker" }), [
-                f("div", u(e.$preset.calendar.hourpicker, { "data-wv-section": "hourpicker" }), [
-                  f("button", u({
-                    "aria-label": e.$wangsvue.config.locale.global.nextHour,
-                    onKeydown: [
-                      ne,
-                      t[2] || (t[2] = w((a) => M(a, 0, 1), ["enter"])),
-                      t[3] || (t[3] = w((a) => M(a, 0, 1), ["space"]))
-                    ],
-                    onKeyup: [
-                      t[4] || (t[4] = w((a) => k(a), ["enter"])),
-                      t[5] || (t[5] = w((a) => k(a), ["space"]))
-                    ],
-                    onMousedown: t[6] || (t[6] = (a) => M(a, 0, 1)),
-                    onMouseleave: t[7] || (t[7] = (a) => le()),
-                    onMouseup: t[8] || (t[8] = (a) => k(a))
-                  }, e.$preset.calendar.incrementbutton, {
-                    "data-wv-group-section": "hourpicker",
-                    "data-wv-section": "incrementbutton",
-                    type: "button"
-                  }), [
-                    U(e.$slots, "incrementicon", {}, () => [
-                      S(X, u({
-                        "data-wv-group-section": "hourpicker",
-                        "data-wv-section": "incrementicon",
-                        icon: "arrow-up-s"
-                      }, e.$preset.calendar.incrementicon), null, 16)
-                    ])
-                  ], 16, Lt),
-                  f("span", u(e.$preset.calendar.timepickerlabel, {
-                    "data-wv-group-section": "hourpicker",
-                    "data-wv-section": "timepickerlabel"
-                  }), F(Oe.value), 17),
-                  f("button", u({
-                    "aria-label": e.$wangsvue.config.locale.global.prevHour,
-                    onKeydown: [
-                      ne,
-                      t[9] || (t[9] = w((a) => M(a, 0, -1), ["enter"])),
-                      t[10] || (t[10] = w((a) => M(a, 0, -1), ["space"]))
-                    ],
-                    onKeyup: [
-                      t[11] || (t[11] = w((a) => k(a), ["enter"])),
-                      t[12] || (t[12] = w((a) => k(a), ["space"]))
-                    ],
-                    onMousedown: t[13] || (t[13] = (a) => M(a, 0, -1)),
-                    onMouseleave: t[14] || (t[14] = (a) => le()),
-                    onMouseup: t[15] || (t[15] = (a) => k(a))
-                  }, e.$preset.calendar.decrementbutton, {
-                    "data-wv-group-section": "hourpicker",
-                    "data-wv-section": "decrementbutton",
-                    type: "button"
-                  }), [
-                    U(e.$slots, "decrementicon", {}, () => [
-                      S(X, u({
-                        "data-wv-group-section": "hourpicker",
-                        "data-wv-section": "decrementicon",
-                        icon: "arrow-down"
-                      }, e.$preset.calendar.decrementicon), null, 16)
-                    ])
-                  ], 16, Rt)
-                ], 16),
-                f("div", u(e.$preset.calendar.separatorcontainer, { "data-wv-section": "separatorcontainer" }), [
-                  f("span", u(e.$preset.calendar.separator, { "data-wv-section": "separator" }), F(e.timeSeparator), 17)
+                      ), toDisplayString(_ctx.$wangsvue.config.locale.global.monthNamesShort[m.value]), 17, _hoisted_11);
+                    }), 128))
+                  ], 16)) : createCommentVNode("", true),
+                  currentView.value === "year" ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 2 }, _ctx.$preset.calendar.yearpicker)), [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(yearPickerValues.value, (y) => {
+                      return openBlock(), createElementBlock("span", mergeProps(
+                        {
+                          key: y.value,
+                          ref_for: true
+                        },
+                        _ctx.$preset.calendar.year({
+                          context: {
+                            year: y,
+                            selected: isYearSelected(y.value),
+                            disabled: !y.selectable
+                          }
+                        }),
+                        {
+                          "data-p-disabled": !y.selectable,
+                          "data-p-highlight": isYearSelected(y.value),
+                          onClick: ($event) => onYearSelect($event, y)
+                        }
+                      ), toDisplayString(y.value), 17, _hoisted_12);
+                    }), 128))
+                  ], 16)) : createCommentVNode("", true)
                 ], 16),
-                f("div", u(e.$preset.calendar.minutepicker, { "data-wv-section": "minutepicker" }), [
-                  f("button", u({
-                    "aria-label": e.$wangsvue.config.locale.global.nextMinute,
-                    disabled: e.disabled,
-                    onKeydown: [
-                      ne,
-                      t[16] || (t[16] = w((a) => M(a, 1, 1), ["enter"])),
-                      t[17] || (t[17] = w((a) => M(a, 1, 1), ["space"]))
-                    ],
-                    onKeyup: [
-                      t[18] || (t[18] = w((a) => k(a), ["enter"])),
-                      t[19] || (t[19] = w((a) => k(a), ["space"]))
-                    ],
-                    onMousedown: t[20] || (t[20] = (a) => M(a, 1, 1)),
-                    onMouseleave: t[21] || (t[21] = (a) => le()),
-                    onMouseup: t[22] || (t[22] = (a) => k(a))
-                  }, e.$preset.calendar.incrementbutton, {
-                    "data-wv-group-section": "minutepicker",
-                    "data-wv-section": "incrementbutton",
-                    type: "button"
-                  }), [
-                    U(e.$slots, "incrementicon", {}, () => [
-                      S(X, u({
-                        "data-wv-group-section": "minutepicker",
-                        "data-wv-section": "incrementicon",
-                        icon: "arrow-up-s"
-                      }, e.$preset.calendar.incrementicon), null, 16)
-                    ])
-                  ], 16, jt),
-                  f("span", u(e.$preset.calendar.timepickerlabel, { "data-wv-section": "timepickerlabel" }), F(Ee.value), 17),
-                  f("button", u({
-                    "aria-label": e.$wangsvue.config.locale.global.prevMinute,
-                    disabled: e.disabled,
-                    onKeydown: [
-                      ne,
-                      t[23] || (t[23] = w((a) => M(a, 1, -1), ["enter"])),
-                      t[24] || (t[24] = w((a) => M(a, 1, -1), ["space"]))
+                _ctx.showTime && currentView.value === "date" ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$preset.calendar.timepicker, { "data-wv-section": "timepicker" }), [
+                  createElementVNode("div", mergeProps(_ctx.$preset.calendar.hourpicker, { "data-wv-section": "hourpicker" }), [
+                    createElementVNode("button", mergeProps({
+                      "aria-label": _ctx.$wangsvue.config.locale.global.nextHour,
+                      onKeydown: [
+                        onContainerButtonKeydown,
+                        _cache[2] || (_cache[2] = withKeys(($event) => onTimePickerElementMouseDown($event, 0, 1), ["enter"])),
+                        _cache[3] || (_cache[3] = withKeys(($event) => onTimePickerElementMouseDown($event, 0, 1), ["space"]))
+                      ],
+                      onKeyup: [
+                        _cache[4] || (_cache[4] = withKeys(($event) => onTimePickerElementMouseUp($event), ["enter"])),
+                        _cache[5] || (_cache[5] = withKeys(($event) => onTimePickerElementMouseUp($event), ["space"]))
+                      ],
+                      onMousedown: _cache[6] || (_cache[6] = ($event) => onTimePickerElementMouseDown($event, 0, 1)),
+                      onMouseleave: _cache[7] || (_cache[7] = ($event) => onTimePickerElementMouseLeave()),
+                      onMouseup: _cache[8] || (_cache[8] = ($event) => onTimePickerElementMouseUp($event))
+                    }, _ctx.$preset.calendar.incrementbutton, {
+                      "data-wv-group-section": "hourpicker",
+                      "data-wv-section": "incrementbutton",
+                      type: "button"
+                    }), [
+                      renderSlot(_ctx.$slots, "incrementicon", {}, () => [
+                        createVNode(_sfc_main$3, mergeProps({
+                          "data-wv-group-section": "hourpicker",
+                          "data-wv-section": "incrementicon",
+                          icon: "arrow-up-s"
+                        }, _ctx.$preset.calendar.incrementicon), null, 16)
+                      ])
+                    ], 16, _hoisted_13),
+                    createElementVNode("span", mergeProps(_ctx.$preset.calendar.timepickerlabel, {
+                      "data-wv-group-section": "hourpicker",
+                      "data-wv-section": "timepickerlabel"
+                    }), toDisplayString(formattedCurrentHour.value), 17),
+                    createElementVNode("button", mergeProps({
+                      "aria-label": _ctx.$wangsvue.config.locale.global.prevHour,
+                      onKeydown: [
+                        onContainerButtonKeydown,
+                        _cache[9] || (_cache[9] = withKeys(($event) => onTimePickerElementMouseDown($event, 0, -1), ["enter"])),
+                        _cache[10] || (_cache[10] = withKeys(($event) => onTimePickerElementMouseDown($event, 0, -1), ["space"]))
+                      ],
+                      onKeyup: [
+                        _cache[11] || (_cache[11] = withKeys(($event) => onTimePickerElementMouseUp($event), ["enter"])),
+                        _cache[12] || (_cache[12] = withKeys(($event) => onTimePickerElementMouseUp($event), ["space"]))
+                      ],
+                      onMousedown: _cache[13] || (_cache[13] = ($event) => onTimePickerElementMouseDown($event, 0, -1)),
+                      onMouseleave: _cache[14] || (_cache[14] = ($event) => onTimePickerElementMouseLeave()),
+                      onMouseup: _cache[15] || (_cache[15] = ($event) => onTimePickerElementMouseUp($event))
+                    }, _ctx.$preset.calendar.decrementbutton, {
+                      "data-wv-group-section": "hourpicker",
+                      "data-wv-section": "decrementbutton",
+                      type: "button"
+                    }), [
+                      renderSlot(_ctx.$slots, "decrementicon", {}, () => [
+                        createVNode(_sfc_main$3, mergeProps({
+                          "data-wv-group-section": "hourpicker",
+                          "data-wv-section": "decrementicon",
+                          icon: "arrow-down"
+                        }, _ctx.$preset.calendar.decrementicon), null, 16)
+                      ])
+                    ], 16, _hoisted_14)
+                  ], 16),
+                  createElementVNode("div", mergeProps(_ctx.$preset.calendar.separatorcontainer, { "data-wv-section": "separatorcontainer" }), [
+                    createElementVNode("span", mergeProps(_ctx.$preset.calendar.separator, { "data-wv-section": "separator" }), toDisplayString(_ctx.timeSeparator), 17)
+                  ], 16),
+                  createElementVNode("div", mergeProps(_ctx.$preset.calendar.minutepicker, { "data-wv-section": "minutepicker" }), [
+                    createElementVNode("button", mergeProps({
+                      "aria-label": _ctx.$wangsvue.config.locale.global.nextMinute,
+                      disabled: _ctx.disabled,
+                      onKeydown: [
+                        onContainerButtonKeydown,
+                        _cache[16] || (_cache[16] = withKeys(($event) => onTimePickerElementMouseDown($event, 1, 1), ["enter"])),
+                        _cache[17] || (_cache[17] = withKeys(($event) => onTimePickerElementMouseDown($event, 1, 1), ["space"]))
+                      ],
+                      onKeyup: [
+                        _cache[18] || (_cache[18] = withKeys(($event) => onTimePickerElementMouseUp($event), ["enter"])),
+                        _cache[19] || (_cache[19] = withKeys(($event) => onTimePickerElementMouseUp($event), ["space"]))
+                      ],
+                      onMousedown: _cache[20] || (_cache[20] = ($event) => onTimePickerElementMouseDown($event, 1, 1)),
+                      onMouseleave: _cache[21] || (_cache[21] = ($event) => onTimePickerElementMouseLeave()),
+                      onMouseup: _cache[22] || (_cache[22] = ($event) => onTimePickerElementMouseUp($event))
+                    }, _ctx.$preset.calendar.incrementbutton, {
+                      "data-wv-group-section": "minutepicker",
+                      "data-wv-section": "incrementbutton",
+                      type: "button"
+                    }), [
+                      renderSlot(_ctx.$slots, "incrementicon", {}, () => [
+                        createVNode(_sfc_main$3, mergeProps({
+                          "data-wv-group-section": "minutepicker",
+                          "data-wv-section": "incrementicon",
+                          icon: "arrow-up-s"
+                        }, _ctx.$preset.calendar.incrementicon), null, 16)
+                      ])
+                    ], 16, _hoisted_15),
+                    createElementVNode("span", mergeProps(_ctx.$preset.calendar.timepickerlabel, { "data-wv-section": "timepickerlabel" }), toDisplayString(formattedCurrentMinute.value), 17),
+                    createElementVNode("button", mergeProps({
+                      "aria-label": _ctx.$wangsvue.config.locale.global.prevMinute,
+                      disabled: _ctx.disabled,
+                      onKeydown: [
+                        onContainerButtonKeydown,
+                        _cache[23] || (_cache[23] = withKeys(($event) => onTimePickerElementMouseDown($event, 1, -1), ["enter"])),
+                        _cache[24] || (_cache[24] = withKeys(($event) => onTimePickerElementMouseDown($event, 1, -1), ["space"]))
+                      ],
+                      onKeyup: [
+                        _cache[25] || (_cache[25] = withKeys(($event) => onTimePickerElementMouseUp($event), ["enter"])),
+                        _cache[26] || (_cache[26] = withKeys(($event) => onTimePickerElementMouseUp($event), ["space"]))
+                      ],
+                      onMousedown: _cache[27] || (_cache[27] = ($event) => onTimePickerElementMouseDown($event, 1, -1)),
+                      onMouseleave: _cache[28] || (_cache[28] = ($event) => onTimePickerElementMouseLeave()),
+                      onMouseup: _cache[29] || (_cache[29] = ($event) => onTimePickerElementMouseUp($event))
+                    }, _ctx.$preset.calendar.decrementbutton, {
+                      "data-wv-group-section": "minutepicker",
+                      "data-wv-section": "decrementbutton",
+                      type: "button"
+                    }), [
+                      renderSlot(_ctx.$slots, "decrementicon", {}, () => [
+                        createVNode(_sfc_main$3, mergeProps({
+                          "data-wv-group-section": "minutepicker",
+                          "data-wv-section": "decrementicon",
+                          icon: "arrow-down"
+                        }, _ctx.$preset.calendar.decrementicon), null, 16)
+                      ])
+                    ], 16, _hoisted_16)
+                  ], 16),
+                  _ctx.hourFormat === "12" ? (openBlock(), createBlock(unref(script$2), {
+                    key: 0,
+                    "model-value": pm.value,
+                    options: [
+                      { label: "AM", value: false },
+                      { label: "PM", value: true }
                     ],
-                    onKeyup: [
-                      t[25] || (t[25] = w((a) => k(a), ["enter"])),
-                      t[26] || (t[26] = w((a) => k(a), ["space"]))
-                    ],
-                    onMousedown: t[27] || (t[27] = (a) => M(a, 1, -1)),
-                    onMouseleave: t[28] || (t[28] = (a) => le()),
-                    onMouseup: t[29] || (t[29] = (a) => k(a))
-                  }, e.$preset.calendar.decrementbutton, {
-                    "data-wv-group-section": "minutepicker",
-                    "data-wv-section": "decrementbutton",
-                    type: "button"
-                  }), [
-                    U(e.$slots, "decrementicon", {}, () => [
-                      S(X, u({
-                        "data-wv-group-section": "minutepicker",
-                        "data-wv-section": "decrementicon",
-                        icon: "arrow-down"
-                      }, e.$preset.calendar.decrementicon), null, 16)
-                    ])
-                  ], 16, Ut)
-                ], 16),
-                e.hourFormat === "12" ? (c(), he(q(St), {
-                  key: 0,
-                  "model-value": y.value,
-                  options: [
-                    { label: "AM", value: !1 },
-                    { label: "PM", value: !0 }
-                  ],
-                  "onUpdate:modelValue": dt,
-                  "option-label": "label",
-                  "option-value": "value"
-                }, null, 8, ["model-value"])) : $("", !0)
-              ], 16)) : $("", !0),
-              U(e.$slots, "addon-overlay"),
-              e.showButtons || e.showTime ? wt((c(), g("div", qt, [
-                S(se, {
-                  label: q(Y).locale.cancelFooterButtonLabel,
-                  onClick: Ie,
-                  severity: "secondary",
-                  text: ""
-                }, null, 8, ["label"]),
-                S(se, {
-                  disabled: !o.value,
-                  label: q(Y).locale.applyFooterButtonLabel,
-                  onClick: it
-                }, null, 8, ["disabled", "label"])
-              ], 512)), [
-                [Mt, p.value === "date"]
-              ]) : $("", !0)
-            ], 16)
-          ]),
-          _: 3
-        }, 8, ["pt"]),
-        S(Ct, {
-          message: e.$attrs["error-message"]
-        }, null, 8, ["message"])
-      ]),
-      _: 3
-    }, 8, ["info", "label", "mandatory", "show-optional-text"]));
+                    "onUpdate:modelValue": toggleAMPM,
+                    "option-label": "label",
+                    "option-value": "value"
+                  }, null, 8, ["model-value"])) : createCommentVNode("", true)
+                ], 16)) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "addon-overlay"),
+                _ctx.showButtons || _ctx.showTime ? withDirectives((openBlock(), createElementBlock("div", _hoisted_17, [
+                  createVNode(_sfc_main$4, {
+                    label: unref(config).locale.cancelFooterButtonLabel,
+                    onClick: revertChanges,
+                    severity: "secondary",
+                    text: ""
+                  }, null, 8, ["label"]),
+                  createVNode(_sfc_main$4, {
+                    disabled: !calendarModelValue.value,
+                    label: unref(config).locale.applyFooterButtonLabel,
+                    onClick: applyChanges
+                  }, null, 8, ["disabled", "label"])
+                ], 512)), [
+                  [vShow, currentView.value === "date"]
+                ]) : createCommentVNode("", true)
+              ], 16)
+            ]),
+            _: 3
+          }, 8, ["pt"]),
+          createVNode(_sfc_main$5, {
+            message: _ctx.$attrs["error-message"]
+          }, null, 8, ["message"])
+        ]),
+        _: 3
+      }, 8, ["info", "label", "mandatory", "show-optional-text"]);
+    };
   }
 });
 export {
-  la as _
+  _sfc_main as _
 };