v-datepicker-lite
Version:
A lightweight Vue 3 date picker with date, time, date-time, week, and month modes
747 lines (746 loc) • 26.1 kB
JavaScript
import { defineComponent as q, computed as Y, createElementBlock as D, openBlock as v, createElementVNode as p, Fragment as C, renderList as H, unref as o, toDisplayString as x, normalizeClass as I, ref as N, watch as O, nextTick as B, onMounted as R, createBlock as z, createCommentVNode as G, normalizeStyle as Q, createVNode as X } from "vue";
const U = (t, r = "YYYY-MM-DD") => {
const e = t.getFullYear(), u = String(t.getMonth() + 1).padStart(2, "0"), s = String(t.getDate()).padStart(2, "0"), d = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0"), a = String(t.getSeconds()).padStart(2, "0"), n = String(t.getMilliseconds()).padStart(3, "0");
return r.replace("YYYY", e.toString()).replace("MM", u).replace("DD", s).replace("HH", d).replace("mm", i).replace("ss", a).replace("sss", n);
}, W = (t) => {
if (!t) return null;
const r = new Date(t);
return isNaN(r.getTime()) ? null : r;
}, L = (t, r) => t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth() && t.getDate() === r.getDate(), ee = (t) => {
const r = new Date(t.getFullYear(), 0, 1), e = (t.getTime() - r.getTime()) / 864e5;
return Math.ceil((e + r.getDay() + 1) / 7);
}, Z = (t, r) => {
const e = new Date(t, r, 1), s = new Date(t, r + 1, 0).getDate(), d = e.getDay(), i = [], a = /* @__PURE__ */ new Date(), n = r === 0 ? 11 : r - 1, m = r === 0 ? t - 1 : t, g = new Date(m, n + 1, 0).getDate();
for (let f = d - 1; f >= 0; f--) {
const c = new Date(m, n, g - f);
i.push({
date: c,
day: g - f,
month: n,
year: m,
isCurrentMonth: !1,
isToday: L(c, a),
isSelected: !1,
isDisabled: !1
});
}
for (let f = 1; f <= s; f++) {
const c = new Date(t, r, f);
i.push({
date: c,
day: f,
month: r,
year: t,
isCurrentMonth: !0,
isToday: L(c, a),
isSelected: !1,
isDisabled: !1
});
}
const l = 42 - i.length, b = r === 11 ? 0 : r + 1, k = r === 11 ? t + 1 : t;
for (let f = 1; f <= l; f++) {
const c = new Date(k, b, f);
i.push({
date: c,
day: f,
month: b,
year: k,
isCurrentMonth: !1,
isToday: L(c, a),
isSelected: !1,
isDisabled: !1
});
}
return i;
}, te = (t, r) => {
const e = Z(t, r), u = [];
for (let s = 0; s < e.length; s += 7) {
const d = e.slice(s, s + 7), i = ee(d[0].date);
u.push({
weekNumber: i,
days: d,
isSelected: !1
});
}
return u;
}, E = (t) => [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
].map((e, u) => ({
month: u,
year: t,
name: e,
isSelected: !1,
isDisabled: !1
})), ae = (t, r, e, u) => {
const s = U(t, "YYYY-MM-DD");
return r && s < r || e && s > e ? !0 : u ? u.some((d) => d.end ? s >= d.start && s <= d.end : s === d.start) : !1;
}, A = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
], j = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ne = { class: "date-picker-content" }, se = { class: "date-picker-table" }, le = { class: "date-picker-weekdays-row" }, re = { class: "date-picker-days-body" }, oe = ["onClick", "disabled"], ce = /* @__PURE__ */ q({
__name: "DateView",
props: {
currentDate: {},
selectedDate: {},
minDate: {},
maxDate: {},
disabledDates: {}
},
emits: ["select"],
setup(t, { emit: r }) {
const e = t, u = r, s = Y(() => Z(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((n) => ({
...n,
isSelected: e.selectedDate ? L(n.date, e.selectedDate) : !1,
isDisabled: ae(n.date, e.minDate, e.maxDate, e.disabledDates)
}))), d = Y(() => {
const a = [];
for (let n = 0; n < s.value.length; n += 7)
a.push(s.value.slice(n, n + 7));
return a;
}), i = (a) => {
a.isDisabled || u("select", a.date);
};
return (a, n) => (v(), D("div", ne, [
p("table", se, [
p("thead", null, [
p("tr", le, [
(v(!0), D(C, null, H(o(j), (m) => (v(), D("th", { key: m }, x(m), 1))), 128))
])
]),
p("tbody", re, [
(v(!0), D(C, null, H(d.value, (m, g) => (v(), D("tr", {
key: g,
class: "date-picker-week-row"
}, [
(v(!0), D(C, null, H(m, (l) => (v(), D("td", {
key: `${l.year}-${l.month}-${l.day}`,
class: "date-picker-day-cell"
}, [
p("button", {
class: I([
"date-picker-day",
{
"other-month": !l.isCurrentMonth,
today: l.isToday,
selected: l.isSelected,
disabled: l.isDisabled
}
]),
onClick: (b) => i(l),
disabled: l.isDisabled
}, x(l.day), 11, oe)
]))), 128))
]))), 128))
])
])
]));
}
}), ie = { class: "date-picker-content" }, ue = {
class: "date-picker-table date-picker-week-table",
cellpadding: "0",
cellspacing: "0"
}, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-weeks-body" }, ve = ["onClick"], he = { class: "date-picker-week-number-cell" }, pe = { class: "date-picker-week-number" }, De = /* @__PURE__ */ q({
__name: "WeekView",
props: {
currentDate: {},
selectedDate: {}
},
emits: ["select"],
setup(t, { emit: r }) {
const e = t, u = r, s = Y(() => te(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((a) => {
const n = e.selectedDate ? a.days.some((m) => L(m.date, e.selectedDate)) : !1;
return {
...a,
isSelected: n
};
})), d = (i) => {
var n;
const a = ((n = i.days.find((m) => m.isCurrentMonth)) == null ? void 0 : n.date) || i.days[0].date;
u("select", a);
};
return (i, a) => (v(), D("div", ie, [
p("table", ue, [
p("thead", null, [
p("tr", de, [
a[0] || (a[0] = p("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
(v(!0), D(C, null, H(o(j), (n) => (v(), D("th", { key: n }, x(n), 1))), 128))
])
]),
p("tbody", me, [
(v(!0), D(C, null, H(s.value, (n) => (v(), D("tr", {
key: n.weekNumber,
class: I([
"date-picker-week-row",
{
selected: n.isSelected
}
]),
onClick: (m) => d(n)
}, [
p("td", he, [
p("div", pe, x(n.weekNumber), 1)
]),
(v(!0), D(C, null, H(n.days, (m) => (v(), D("td", {
key: `${m.year}-${m.month}-${m.day}`,
class: "date-picker-day-cell"
}, [
p("button", {
class: I([
"date-picker-day",
{
"other-month": !m.isCurrentMonth,
today: m.isToday
}
])
}, x(m.day), 3)
]))), 128))
], 10, ve))), 128))
])
])
]));
}
});
function ge(t, r = "24h", e = 15, u) {
const s = N(0), d = N(0), i = N([]), a = Y(() => r === "12h"), n = () => {
if (t)
s.value = t.getHours(), d.value = t.getMinutes();
else {
const c = /* @__PURE__ */ new Date();
s.value = c.getHours(), d.value = c.getMinutes();
}
g();
}, m = (c) => {
c && (s.value = c.getHours(), d.value = c.getMinutes());
}, g = () => {
const c = [], y = a.value ? 1 : 0;
for (let M = 0; M < (a.value ? 2 : 1); M++) {
const P = a.value ? M === 0 ? " AM" : " PM" : "";
for (let w = y; w <= (a.value ? 12 : 23); w++)
for (let T = 0; T < 60; T += e) {
const F = (a.value, w), h = a.value ? w === 12 ? M === 0 ? 0 : 12 : w + M * 12 : w, $ = `${String(F).padStart(2, "0")}:${String(T).padStart(2, "0")}` + P;
c.push({
display: $,
value: `${String(h).padStart(2, "0")}:${String(T).padStart(2, "0")}`,
hour: h,
minute: T
});
}
}
a.value ? i.value = c.map((M) => M.display) : i.value = c.map((M) => M.value);
}, l = () => {
if (a.value) {
const c = s.value === 0 ? 12 : s.value > 12 ? s.value - 12 : s.value, y = s.value < 12 ? " AM" : " PM";
return `${String(c).padStart(2, "0")}:${String(d.value).padStart(
2,
"0"
)}${y}`;
}
return `${String(s.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")}`;
};
return {
hours: s,
minutes: d,
timeOptions: i,
is12HourFormat: a,
initializeTime: n,
updateTime: m,
generateTimeOptions: g,
getCurrentTimeString: l,
selectTime: (c) => {
let y, M;
if (a.value) {
const [w, T] = c.split(" "), [F, h] = w.split(":");
y = parseInt(F), M = parseInt(h), T === "AM" ? y === 12 && (y = 0) : y !== 12 && (y += 12);
} else {
const [w, T] = c.split(":");
y = parseInt(w), M = parseInt(T);
}
s.value = y, d.value = M;
const P = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date();
P.setHours(y, M, 0, 0), u("update", P);
},
scrollToSelected: (c) => {
if (!c) return;
const y = i.value.findIndex((M) => M === l());
if (y >= 0) {
const P = c.clientHeight, w = y * 30 - P / 2 + 30 / 2;
c.scrollTop = Math.max(0, w);
}
},
onTimeUpdate: (c) => {
s.value = c.getHours(), d.value = c.getMinutes(), u("update", c);
}
};
}
const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"], J = /* @__PURE__ */ q({
__name: "TimeView",
props: {
selectedTime: {},
timeFormat: { default: "24h" },
timeInterval: { default: 15 }
},
emits: ["update"],
setup(t, { emit: r }) {
const e = t, u = r, s = N(null), { timeOptions: d, initializeTime: i, updateTime: a, getCurrentTimeString: n, selectTime: m, scrollToSelected: g } = ge(e.selectedTime, e.timeFormat, e.timeInterval, u);
return O(
() => e.selectedTime,
(l) => {
a(l), B(() => {
g(s.value);
});
},
{ immediate: !0 }
), O(
() => e.timeFormat,
() => {
i(), B(() => {
g(s.value);
});
}
), O(
() => e.timeInterval,
() => {
i(), B(() => {
g(s.value);
});
}
), R(() => {
i(), B(() => {
setTimeout(() => {
g(s.value);
}, 3);
});
}), (l, b) => (v(), D("div", ke, [
p("div", {
ref_key: "timeListRef",
ref: s,
class: "time-wheel",
role: "listbox",
"aria-label": "Time Selection"
}, [
(v(!0), D(C, null, H(o(d), (k) => (v(), D("div", {
key: k,
class: I(["time-option", {
selected: k === o(n)()
}]),
role: "option",
"aria-selected": k === o(n)(),
onClick: (f) => o(m)(k)
}, x(k), 11, fe))), 128))
], 512)
]));
}
}), Me = { class: "year-view-layout" }, ye = { class: "years-section" }, be = { class: "years-list" }, _e = ["onClick"], we = { class: "months-section" }, Se = { class: "date-picker-table date-picker-months-table" }, Ye = { class: "date-picker-months-body" }, $e = ["onClick", "disabled"], Te = /* @__PURE__ */ q({
__name: "YearView",
props: {
currentDate: {},
selectedDate: {}
},
emits: ["select", "month-select"],
setup(t, { emit: r }) {
const e = t, u = r, s = Y(() => e.currentDate.getFullYear()), d = Y(() => {
var l;
return (l = e.selectedDate) == null ? void 0 : l.getFullYear();
}), i = Y(() => {
const l = Math.floor(s.value / 10) * 10;
return Array.from({ length: 12 }, (b, k) => l + k - 1);
}), a = Y(() => E(s.value).map((l) => ({
...l,
isSelected: e.selectedDate ? l.month === e.selectedDate.getMonth() && l.year === e.selectedDate.getFullYear() : !1
}))), n = Y(() => {
const l = [];
for (let b = 0; b < a.value.length; b += 3)
l.push(a.value.slice(b, b + 3));
return l;
}), m = (l) => {
u("select", l);
}, g = (l) => {
u("month-select", l.month);
};
return (l, b) => (v(), D("div", Me, [
p("div", ye, [
p("div", be, [
(v(!0), D(C, null, H(i.value, (k) => (v(), D("button", {
key: k,
class: I([
"year-item",
{
selected: k === d.value,
current: k === s.value
}
]),
onClick: (f) => m(k)
}, x(k), 11, _e))), 128))
])
]),
p("div", we, [
p("table", Se, [
p("tbody", Ye, [
(v(!0), D(C, null, H(n.value, (k, f) => (v(), D("tr", {
key: f,
class: "date-picker-months-row"
}, [
(v(!0), D(C, null, H(k, (c) => (v(), D("td", {
key: c.month,
class: "date-picker-month-cell"
}, [
p("button", {
class: I([
"date-picker-month",
{
selected: c.isSelected,
disabled: c.isDisabled
}
]),
onClick: (y) => g(c),
disabled: c.isDisabled
}, x(c.name.substring(0, 3)), 11, $e)
]))), 128))
]))), 128))
])
])
])
]));
}
}), Ce = { class: "date-picker-content" }, He = { class: "date-picker-table date-picker-months-table" }, Fe = { class: "date-picker-months-body" }, Pe = ["onClick", "disabled"], xe = /* @__PURE__ */ q({
__name: "MonthView",
props: {
currentDate: {},
selectedDate: {}
},
emits: ["select"],
setup(t, { emit: r }) {
const e = t, u = r, s = Y(() => E(e.currentDate.getFullYear()).map((n) => ({
...n,
isSelected: e.selectedDate ? n.month === e.selectedDate.getMonth() && n.year === e.selectedDate.getFullYear() : !1
}))), d = Y(() => {
const a = [];
for (let n = 0; n < s.value.length; n += 3)
a.push(s.value.slice(n, n + 3));
return a;
}), i = (a) => {
u("select", a.month);
};
return (a, n) => (v(), D("div", Ce, [
p("table", He, [
p("tbody", Fe, [
(v(!0), D(C, null, H(d.value, (m, g) => (v(), D("tr", {
key: g,
class: "date-picker-months-row"
}, [
(v(!0), D(C, null, H(m, (l) => (v(), D("td", {
key: l.month,
class: "date-picker-month-cell"
}, [
p("button", {
class: I([
"date-picker-month",
{
selected: l.isSelected,
disabled: l.isDisabled
}
]),
onClick: (b) => i(l),
disabled: l.isDisabled
}, x(l.name), 11, Pe)
]))), 128))
]))), 128))
])
])
]));
}
}), Ne = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></svg>', Ie = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></svg>', Ve = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9"/></svg>', Ge = { class: "date-picker-header" }, qe = ["disabled"], ze = ["innerHTML"], Be = ["innerHTML"], Le = ["disabled"], Oe = ["innerHTML"], We = /* @__PURE__ */ q({
__name: "DatePickerHeader",
props: {
currentDate: {},
viewMode: {},
canGoPrev: { type: Boolean },
canGoNext: { type: Boolean }
},
emits: ["prev", "next", "header-click", "current-date"],
setup(t, { emit: r }) {
const e = t, u = r, s = Y(() => {
const m = e.currentDate.getFullYear(), g = e.currentDate.getMonth();
switch (e.viewMode) {
case "date":
return `${A[g]} ${m}`;
case "year":
const l = Math.floor(m / 10) * 10, b = l + 9;
return `${l}–${b}`;
default:
return `${A[g]} ${m}`;
}
}), d = () => {
u("prev");
}, i = () => {
u("next");
}, a = () => {
u("header-click");
}, n = () => {
u("current-date");
};
return (m, g) => (v(), D("div", Ge, [
p("button", {
class: "date-picker-title",
onClick: a,
type: "button"
}, x(s.value), 1),
p("button", {
class: "date-picker-nav-button ml-auto",
disabled: !m.canGoPrev,
onClick: d,
type: "button",
"aria-label": "Previous"
}, [
p("span", {
class: "date-picker-nav-icon",
innerHTML: o(Ne)
}, null, 8, ze)
], 8, qe),
p("button", {
class: "date-picker-nav-button",
onClick: n,
type: "button",
"aria-label": "Current Date"
}, [
p("span", {
class: "date-picker-nav-icon",
innerHTML: o(Ve)
}, null, 8, Be)
]),
p("button", {
class: "date-picker-nav-button",
disabled: !m.canGoNext,
onClick: i,
type: "button",
"aria-label": "Next"
}, [
p("span", {
class: "date-picker-nav-icon",
innerHTML: o(Ie)
}, null, 8, Oe)
], 8, Le)
]));
}
});
function Ae(t, r) {
const e = N(/* @__PURE__ */ new Date()), u = N("date"), s = Y(() => t.value ? t.value instanceof Date ? t.value : W(t.value) : null), d = Y(() => {
if (!t.minDate) return !0;
const h = W(t.minDate);
if (!h) return !0;
const S = e.value.getFullYear(), $ = e.value.getMonth();
return new Date(S, $, 1) > h;
}), i = Y(() => {
if (!t.maxDate) return !0;
const h = W(t.maxDate);
if (!h) return !0;
const S = e.value.getFullYear(), $ = e.value.getMonth();
return new Date(S, $ + 1, 0) < h;
}), a = () => {
d.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() - 1, 1));
}, n = () => {
i.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() + 1, 1));
}, m = () => {
e.value = new Date(e.value.getFullYear() - 1, e.value.getMonth(), 1);
}, g = () => {
e.value = new Date(e.value.getFullYear() + 1, e.value.getMonth(), 1);
}, l = () => {
e.value = new Date(e.value.getFullYear() - 10, e.value.getMonth(), 1);
}, b = () => {
e.value = new Date(e.value.getFullYear() + 10, e.value.getMonth(), 1);
}, k = () => {
e.value = /* @__PURE__ */ new Date(), u.value = "date";
}, f = () => {
switch (u.value) {
case "date":
u.value = "year";
break;
case "year":
u.value = "date";
break;
}
}, c = (h) => {
t.mode === "dateTime" && s.value && h.setHours(s.value.getHours(), s.value.getMinutes()), F(h);
}, y = (h) => {
F(h);
}, M = (h) => {
e.value = new Date(e.value.getFullYear(), h, 1), u.value = "date", t.mode === "month" && F(new Date(e.value.getFullYear(), h, 1));
}, P = (h) => {
e.value = new Date(h, e.value.getMonth(), 1), u.value = "date";
}, w = (h) => {
const S = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, $ = /^\d{4}-\d{2}-\d{2}$/;
return S.test(h) ? h.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : $.test(h) ? "YYYY-MM-DD" : t.format || "YYYY-MM-DD";
}, T = (h, S) => {
const $ = w(S);
return $.includes("T") ? $.includes(".sss") ? h.toISOString() : h.toISOString().replace(/\.\d{3}Z$/, "Z") : U(h, $);
}, F = (h) => {
let S;
typeof t.value == "string" ? S = T(h, t.value) : S = h, r("update:value", S), r("change", S), r("select", S);
};
return {
currentDate: e,
viewMode: u,
selectedDate: s,
canGoPrev: d,
canGoNext: i,
goToPrevMonth: a,
goToNextMonth: n,
goToPrevYear: m,
goToNextYear: g,
goToPrevDecade: l,
goToNextDecade: b,
goToCurrentDate: k,
onHeaderClick: f,
onDateSelect: c,
onWeekSelect: y,
onMonthSelect: M,
onYearSelect: P,
emitValue: F
};
}
const Je = { class: "date-picker" }, Re = {
key: 0,
class: "date-picker-time-section"
}, Ze = /* @__PURE__ */ q({
__name: "DatePicker",
props: {
value: {},
mode: { default: "date" },
minDate: {},
maxDate: {},
disabledDates: {},
format: { default: "YYYY-MM-DD" },
disabled: { type: Boolean },
readonly: { type: Boolean },
timeFormat: { default: "24h" },
timeInterval: { default: 15 }
},
emits: ["update:value", "change", "select"],
setup(t, { emit: r }) {
const e = t, u = r, s = N(null), d = N(0), {
currentDate: i,
viewMode: a,
selectedDate: n,
canGoPrev: m,
canGoNext: g,
goToPrevMonth: l,
goToNextMonth: b,
goToPrevYear: k,
goToNextYear: f,
goToPrevDecade: c,
goToNextDecade: y,
goToCurrentDate: M,
onHeaderClick: P,
onDateSelect: w,
onWeekSelect: T,
onMonthSelect: F,
onYearSelect: h,
emitValue: S
} = Ae(e, u), $ = (_) => {
if (e.mode === "dateTime" && n.value) {
const V = new Date(n.value.getTime());
V.setHours(_.getHours(), _.getMinutes(), 0, 0), S(V);
} else
S(_);
};
return R(async () => {
B(() => {
s.value && (d.value = s.value.clientHeight);
});
}), (_, V) => (v(), D("div", Je, [
_.mode !== "time" ? (v(), z(We, {
key: 0,
"current-date": o(i),
"view-mode": o(a),
"can-go-prev": o(m),
"can-go-next": o(g),
onPrev: V[0] || (V[0] = (K) => o(a) === "year" ? o(c)() : o(a) === "month" ? o(k)() : o(l)()),
onNext: V[1] || (V[1] = (K) => o(a) === "year" ? o(y)() : o(a) === "month" ? o(f)() : o(b)()),
onHeaderClick: o(P),
onCurrentDate: o(M)
}, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) : G("", !0),
p("div", {
class: I({
"date-picker-datetime-layout": _.mode === "dateTime" && o(a) === "date"
}),
style: Q({
height: d.value !== 0 ? d.value + "px" : "100%"
})
}, [
p("div", {
class: "date-picker-date-section",
ref_key: "datePickerContent",
ref: s
}, [
o(a) === "date" && (_.mode === "date" || _.mode === "dateTime") ? (v(), z(ce, {
key: 0,
"current-date": o(i),
"selected-date": o(n),
"min-date": _.minDate,
"max-date": _.maxDate,
"disabled-dates": _.disabledDates,
onSelect: o(w)
}, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) : G("", !0),
_.mode === "week" && o(a) === "date" ? (v(), z(De, {
key: 1,
"current-date": o(i),
"selected-date": o(n),
onSelect: o(T)
}, null, 8, ["current-date", "selected-date", "onSelect"])) : G("", !0),
o(a) !== "year" && (o(a) === "month" || _.mode === "month") ? (v(), z(xe, {
key: 2,
"current-date": o(i),
"selected-date": o(n),
onSelect: o(F)
}, null, 8, ["current-date", "selected-date", "onSelect"])) : G("", !0),
o(a) === "year" ? (v(), z(Te, {
key: 3,
"current-date": o(i),
"selected-date": o(n),
onSelect: o(h),
onMonthSelect: o(F)
}, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) : G("", !0)
], 512),
_.mode === "dateTime" && o(a) === "date" ? (v(), D("div", Re, [
X(J, {
"selected-time": o(n),
"time-format": _.timeFormat,
"time-interval": _.timeInterval,
onUpdate: $
}, null, 8, ["selected-time", "time-format", "time-interval"])
])) : G("", !0)
], 6),
_.mode === "time" ? (v(), z(J, {
key: 1,
"selected-time": o(n),
"time-format": _.timeFormat,
"time-interval": _.timeInterval,
onUpdate: $
}, null, 8, ["selected-time", "time-format", "time-interval"])) : G("", !0)
]));
}
});
export {
Ze as default
};