UNPKG

@febe95/vue-functional-calendar

Version:

Lightweight, high-performance calendar component based on Vue.js

1,360 lines 78.8 kB
import { createElementBlock as c, openBlock as h, createElementVNode as g, Fragment as w, createCommentVNode as R, normalizeClass as C, toDisplayString as k, createTextVNode as A, renderList as T, renderSlot as v, normalizeStyle as B, withModifiers as N, withDirectives as E, vShow as L, withKeys as W, resolveComponent as b, createVNode as P, withCtx as M, createBlock as Y, Transition as _, TransitionGroup as j } from "vue"; Date.prototype.getWeekNumber = function(e) { if (!e) { let a = (this.getDay() + 6) % 7; this.setDate(this.getDate() - a + 3); } let t = new Date(this.getFullYear(), 0, 4); return Math.ceil(((this - t) / 864e5 + t.getDay() + 1) / 7); }; class q { constructor(t, a, r, i) { this.sundayStart = t, this.leftAndRightDays = a, this.dateFormat = r, this.dayNames = i; } formatDate(t) { let a = t.getDate(), r = t.getMonth() + 1, i = t.getFullYear(), s = this.dateFormat.replace("dd", a.toString()); return s = s.replace("mm", r.toString()), s = s.replace("yyyy", i.toString()), s.split(" ")[0]; } getDateFromFormat(t) { let a = this.dateFormat.split(" ")[0]; if (t = t.split(" ")[0], a.indexOf("/") !== -1) a = a.split("/"), t = t.split("/"); else if (a.indexOf("-") !== -1) a = a.split("-"), t = t.split("-"); else if (a.indexOf(".") !== -1) a = a.split("."), t = t.split("."); else throw new Error("Your date format not valid. Please read documentation.!"); let r = a.indexOf("yyyy"), i = a.indexOf("mm"), s = a.indexOf("dd"); return new Date(t[r], t[i] - 1, t[s]); } checkValidDate(t) { return t = this.getDateFromFormat(t), t != "Invalid Date"; } getWeeksInMonth(t, a) { let r = [], i = new Date(a, t, 1), s = new Date(a, t + 1, 0), n = s.getDate(), l = 1, o = this.sundayStart ? 7 - i.getDay() : i.getDay() === 0 ? 1 : 7 - i.getDay() + 1; for (; l <= n; ) r.push({ year: a, start: l, end: o, number: new Date(a, t, l).getWeekNumber(this.sundayStart), days: [] }), l = o + 1, o = o + 7, o > n && (o = n); return { weeks: r, month: s.getMonth(), year: s.getFullYear() }; } getLeftMonthDays(t, a) { let i = this.getWeeksInMonth(t, a).weeks[0], s = i.end - i.start + 1, n = [], l = 0, o = 0; if (s !== 7) { let d = this.getWeeksInMonth(t - 1, a), m = d.weeks[d.weeks.length - 1]; for (let u = m.start; u <= m.end; u++) n.push(u); o = d.month, l = d.year; } return { days: n.reverse(), month: o, year: l }; } getRightMonthDays(t, a) { let r = this.getWeeksInMonth(t, a), i = r.weeks[r.weeks.length - 1], s = i.end - i.start + 1, n = [], l = 0, o = 0; if (s !== 7) { let d = this.getWeeksInMonth(t + 1, a), m = d.weeks[0]; for (let u = m.start; u <= m.end; u++) n.push(u); o = d.month, l = d.year; } return { days: n, month: o, year: l }; } getFinalizedWeeks(t, a) { let r = this.getWeeksInMonth(t, a), i = this.getLeftMonthDays(t, a), s = this.getRightMonthDays(t, a); return r.weeks.forEach((n) => { for (let l = n.start; l <= n.end; l++) n.days.push({ day: l, month: r.month, year: r.year, hide: !1, hideLeftAndRightDays: !1 }); }), i.days.length && i.days.forEach((n) => { let l = !1; this.leftAndRightDays || (n = "", l = !0), r.weeks[0].days.unshift({ day: n, month: i.month, year: i.year, hide: !0, hideLeftAndRightDays: l }); }), s.days.length && s.days.forEach((n) => { let l = !1; this.leftAndRightDays || (n = "", l = !0), r.weeks[r.weeks.length - 1].days.push({ day: n, month: s.month, year: s.year, hide: !0, hideLeftAndRightDays: l }); }), r.weeks.forEach((n) => { delete n.year; }), r.weeks; } mask(t) { let a = this.getDateFromFormat(t).getDate().toString().length, r = this.getDateFromFormat(t).getMonth(), i = "00"; a === 1 && (i = "0"); let s = "00"; r + 1 <= 9 && (s = "0"); let n = this.dateFormat.replace("dd", i).replace("mm", s).replace("yyyy", "0000"), l = /[0\*]/, o = /[0-9]/, d = ""; for (let m = 0, u = 0; u < n.length && !(u >= t.length || n[u] === "0" && t[m].match(o) == null); ) { for (; n[u].match(l) == null && t[m] !== n[u]; ) d += n[u++]; d += t[m++], u++; } return d; } } const y = () => { }, U = { props: { activeHours: { type: Array, required: !1 }, activeMinutes: { type: Array, required: !1 }, borderColor: { type: String, default: "" }, displayTimeInput: { type: Boolean, default: !1 }, configs: { type: Object, default: () => { } }, sundayStart: { type: Boolean, default: y }, placeholder: { type: [String, Boolean], default: y }, dateFormat: { type: String, validator(e) { let t = e.split(" ")[1]; return t ? !!~["HH:MM", "HH:mm", "hh:MM", "hh:mm"].indexOf(t) : !0; } }, canClearRange: { type: Boolean, default: !1 }, isMultiple: { type: Boolean, default: y }, isSeparately: { type: Boolean, default: y }, isDatePicker: { type: Boolean, default: y }, isMultipleDatePicker: { type: Boolean, default: y }, isMultipleDateRange: { type: Boolean, default: y }, isDateRange: { type: Boolean, default: y }, withTimePicker: { type: Boolean, default: y }, calendarsCount: { type: Number }, isModal: { type: Boolean, default: y }, isTypeable: { type: Boolean, default: y }, changeMonthFunction: { type: Boolean, default: y }, changeYearFunction: { type: Boolean, default: y }, changeYearStep: { type: Number, default: () => 3 }, changeMonthStep: { type: Number, default: () => 1 }, newCurrentDate: { type: Date }, markedDates: { type: Array, default: () => [] }, markedDateRange: { type: [Object, Array] }, disabledDayNames: { type: Array }, disabledDates: { type: Array, default: () => [] }, enabledDates: { type: Array, default: () => [] }, limits: { type: [Object, Boolean], default: y }, minSelDays: { type: [Number, Boolean], default: y }, maxSelDays: { type: [Number, Boolean], default: y }, dayNames: { type: Array }, monthNames: { type: Array }, shortMonthNames: { type: Array }, showWeekNumbers: { type: Boolean, default: y }, modelValue: { type: Object }, transition: { type: Boolean, default: y }, hiddenElements: { type: Array }, isAutoCloseable: { type: Boolean, default: void 0 }, isDark: { type: Boolean, default: void 0 }, isLayoutExpandable: { type: Boolean, default: void 0 }, titlePosition: { type: String, default: "center" }, arrowsPosition: { type: String, default: "space-between" }, alwaysUseDefaultClasses: { type: Boolean, default: !1 } }, data() { return { popoverElement: "", defaultDateFormat: { date: !1, dateTime: !1, hour: "00", minute: "00" }, hoveredObject: null, calendar: { currentDate: /* @__PURE__ */ new Date(), selectedDate: !1, selectedDateTime: !1, selectedHour: "00", selectedMinute: "00", selectedDatesItem: "", selectedDates: [], dateRange: { start: "", end: "" }, multipleDateRange: [] }, transitionPrefix: "left", showCalendar: !0, showMonthPicker: !1, showYearPicker: !1, showTimePicker: !1, allowPreDate: !0, allowNextDate: !0, listCalendars: [], fConfigs: { sundayStart: !1, placeholder: !1, dateFormat: "dd/mm/yyyy hh:MM", isMultipleDateRange: !1, isDatePicker: !1, isMultipleDatePicker: !1, isDateRange: !1, withTimePicker: !1, isMultiple: !1, calendarsCount: 1, isSeparately: !1, isModal: !1, isTypeable: !1, changeMonthFunction: !1, changeYearFunction: !1, changeYearStep: 3, changeMonthStep: 1, markedDates: [], markedDateRange: { start: !1, end: !1 }, limits: !1, minSelDays: !1, maxSelDays: !1, disabledDates: [], enabledDates: [], disabledDayNames: [], dayNames: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], shortMonthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], showWeekNumbers: !1, transition: !0, hiddenElements: [], isAutoCloseable: !1, isDark: !1, isLayoutExpandable: !1, titlePosition: "center", arrowsPosition: "space-between" } }; } }, S = (e, t) => { const a = e.__vccOpts || e; for (const [r, i] of t) a[r] = i; return a; }, z = { name: "TimePicker", data() { return { startDateActive: !0, currentSelectedDate: "" }; }, props: { height: { type: Number, required: !0 }, hours: { type: Array, default: function() { return [...Array(24).keys()]; }, required: !1 }, minutes: { type: Array, default: function() { return [...Array(60).keys()]; }, required: !1 } }, watch: { startDateActive: function() { this.setScrollPosition(); } }, computed: { getCurrentDate() { return this.currentSelectedDate.date; }, getCurrentDateTime() { return this.currentSelectedDate.dateTime; } }, created() { let e = this.$parent.calendar.selectedDates; this.currentSelectedDate = e[e.length - 1]; }, mounted() { let e = this.$parent.calendar.dateRange.start.split(" ")[0], t = this.$parent.calendar.dateRange.end.split(" ")[0]; e && this.$parent.helpCalendar.getDateFromFormat(e) < this.$parent.helpCalendar.getDateFromFormat(t) ? this.startDateActive = !1 : this.startDateActive = !0, this.setSelectedDateTime(), this.setStyles(); }, methods: { formatTime(e) { return e < 10 ? "0" + e : e; }, close() { this.$parent.showTimePicker = !1; }, addMinuteHour(e, t, a) { let r = ""; return r += t.split(" ")[0], e == "hour" ? (r += " " + a + ":", r += t.split(" ")[1].split(":")[1]) : (r += " " + t.split(" ")[1].split(":")[0] + ":", r += a), r; }, changeHour(e) { if (this.$parent.fConfigs.isDateRange) this.checkStartDate() ? this.$parent.calendar.dateRange.start = this.addMinuteHour( "hour", this.$parent.calendar.dateRange.start, e ) : this.$parent.calendar.dateRange.end = this.addMinuteHour( "hour", this.$parent.calendar.dateRange.end, e ); else if (this.$parent.fConfigs.isMultipleDatePicker) { let t = this.$parent.calendar.selectedDates.find( (a) => a.date === this.getCurrentDate ); t.hour = e; } else this.$parent.calendar.selectedHour = e; this.setSelectedDateTime(), this.setScrollPosition(); }, changeMinute(e) { if (this.$parent.fConfigs.isDateRange) this.checkStartDate() ? this.$parent.calendar.dateRange.start = this.addMinuteHour( "minute", this.$parent.calendar.dateRange.start, e ) : this.$parent.calendar.dateRange.end = this.addMinuteHour( "minute", this.$parent.calendar.dateRange.end, e ); else if (this.$parent.fConfigs.isMultipleDatePicker) { let t = this.$parent.calendar.selectedDates.find( (a) => a.date === this.getCurrentDate ); t.minute = e; } else this.$parent.calendar.selectedMinute = e; this.setSelectedDateTime(), this.setScrollPosition(); }, setSelectedDateTime() { if (this.$parent.fConfigs.isDatePicker) this.$parent.calendar.selectedDateTime = this.$parent.calendar.selectedDate + " " + this.$parent.calendar.selectedHour + ":" + this.$parent.calendar.selectedMinute; else if (this.$parent.fConfigs.isMultipleDatePicker) { let e = this.$parent.calendar.selectedDates.find( (t) => t.date === this.getCurrentDate ); e.dateTime = e.date + " " + e.hour + ":" + e.minute; } }, checkStartDate() { return this.startDateActive; }, checkHourActiveClass(e) { let t; return this.$parent.fConfigs.isDateRange ? this.checkStartDate() ? t = this.$parent.calendar.dateRange.start.split(" ")[1].split(":")[0] : t = this.$parent.calendar.dateRange.end.split(" ")[1].split(":")[0] : this.$parent.fConfigs.isMultipleDatePicker ? t = this.$parent.calendar.selectedDates.find( (a) => a.date === this.getCurrentDate ).hour : t = this.$parent.calendar.selectedHour, this.hours.length && !this.hours.some((a) => a == t) && (t = this.hours[0]), t == this.formatTime(e); }, checkMinuteActiveClass(e) { let t; return this.$parent.fConfigs.isDateRange ? this.checkStartDate() ? t = this.$parent.calendar.dateRange.start.split(":")[1] : t = this.$parent.calendar.dateRange.end.split(":")[1] : this.$parent.fConfigs.isMultipleDatePicker ? t = this.$parent.calendar.selectedDates.find( (a) => a.date === this.getCurrentDate ).minute : t = this.$parent.calendar.selectedMinute, this.minutes.length && !this.minutes.some((a) => a == t) && (t = this.minutes[0]), t == this.formatTime(e); }, setStyles() { this.setScrollPosition(); let e = +this.height - 35 - 85; document.getElementsByClassName("vfc-time-picker__list")[0].style.height = e + "px", document.getElementsByClassName("vfc-time-picker__list")[1].style.height = e + "px"; }, setScrollPosition() { let e = this.$parent.$refs.mainContainer; this.$nextTick(function() { const t = this.$refs.hourList.querySelector( ".vfc-time-picker__item--selected" ), a = this.$refs.minuteList.querySelector( ".vfc-time-picker__item--selected" ); this.$refs.hourList.scrollTop = t ? t.offsetTop - e.clientHeight / 2 : 0, this.$refs.minuteList.scrollTop = a ? a.offsetTop - e.clientHeight / 2 : 0; }); } } }, J = { class: "vfc-time-picker-container" }, G = { class: "vfc-modal-time-mechanic" }, V = { id: "time-line", class: "vfc-modal-time-line" }, Q = { class: "vfc-time-picker" }, X = { class: "vfc-time-picker__list vfc-time-picker__list--hours", ref: "hourList" }, Z = ["onClick"], K = { class: "vfc-time-picker__list vfc-time-picker__list--minutes", ref: "minuteList" }, ee = ["onClick"]; function te(e, t, a, r, i, s) { return h(), c("div", J, [ g("div", { class: "vfc-close", onClick: t[0] || (t[0] = (n) => s.close()) }), g("div", G, [ g("div", V, [ g("span", null, [ e.$parent.fConfigs.isDateRange ? (h(), c(w, { key: 0 }, [ g("span", { onClick: t[1] || (t[1] = (n) => i.startDateActive = !0), class: C({ "vfc-active": i.startDateActive }) }, k(e.$parent.calendar.dateRange.start), 3), e.$parent.calendar.dateRange.end ? (h(), c(w, { key: 0 }, [ t[3] || (t[3] = g("span", null, "-", -1)), g("span", { onClick: t[2] || (t[2] = (n) => i.startDateActive = !1), class: C({ "vfc-active": !i.startDateActive }) }, k(e.$parent.calendar.dateRange.end), 3) ], 64)) : R("", !0) ], 64)) : e.$parent.fConfigs.isMultipleDatePicker ? (h(), c(w, { key: 1 }, [ A(k(s.getCurrentDateTime), 1) ], 64)) : (h(), c(w, { key: 2 }, [ A(k(e.$parent.calendar.selectedDateTime), 1) ], 64)) ]) ]), t[4] || (t[4] = g("div", { class: "titles" }, [ g("div", null, "Hour"), g("div", null, "Minute") ], -1)), g("div", Q, [ g("div", X, [ (h(!0), c(w, null, T(a.hours, (n) => (h(), c("div", { class: C(["vfc-time-picker__item", { "vfc-time-picker__item--selected": s.checkHourActiveClass(n) }]), key: n, onClick: (l) => s.changeHour(s.formatTime(n)) }, k(s.formatTime(n)), 11, Z))), 128)) ], 512), g("div", K, [ (h(!0), c(w, null, T(a.minutes, (n) => (h(), c("div", { class: C(["vfc-time-picker__item", { "vfc-time-picker__item--selected": s.checkMinuteActiveClass(n) }]), key: n, onClick: (l) => s.changeMinute(s.formatTime(n)) }, k(s.formatTime(n)), 11, ee))), 128)) ], 512) ]) ]) ]); } const ae = /* @__PURE__ */ S(z, [["render", te], ["__scopeId", "data-v-5dc081df"]]), se = { name: "CalendarArrows", props: { fConfigs: { type: Object, required: !0 }, allowPreDate: { type: Boolean, required: !0 }, allowNextDate: { type: Boolean, required: !0 }, calendarKey: { type: Number, default: 0 }, isMultiple: { type: Boolean, required: !0 } }, computed: { oneArrows() { return !this.fConfigs.isSeparately && !this.isMultiple; }, manyArrows() { return this.fConfigs.isSeparately && this.isMultiple; } } }; function ie(e, t, a, r, i, s) { return h(), c("div", null, [ s.oneArrows || s.manyArrows ? (h(), c("div", { key: 0, class: C(["vfc-separately-navigation-buttons", "vfc-" + a.fConfigs.arrowsPosition]) }, [ g("div", { onClick: t[0] || (t[0] = (n) => e.$parent.PreMonth(s.oneArrows ? 0 : a.calendarKey)), class: C({ "vfc-cursor-pointer": a.allowPreDate }) }, [ v(e.$slots, "navigationArrowLeft", {}, () => [ g("div", { class: C(["vfc-arrow-left", { "vfc-disabled": !a.allowPreDate }]) }, null, 2) ]) ], 2), g("div", { onClick: t[1] || (t[1] = (n) => e.$parent.NextMonth(s.oneArrows ? 0 : a.calendarKey)), class: C({ "vfc-cursor-pointer": a.allowNextDate }) }, [ v(e.$slots, "navigationArrowRight", {}, () => [ g("div", { class: C(["vfc-arrow-right", { "vfc-disabled": !a.allowNextDate }]) }, null, 2) ]) ], 2) ], 2)) : R("", !0) ]); } const ne = /* @__PURE__ */ S(se, [["render", ie]]), re = { name: "WeekNumbers", props: { number: { tyoe: Number, required: !0 }, borderColor: { type: String, default: "" } } }, le = { class: "vfc-span-day" }; function de(e, t, a, r, i, s) { return h(), c("div", { class: "vfc-day vfc-week-number", style: B({ borderRightColor: a.borderColor }) }, [ g("span", le, k(a.number), 1) ], 4); } const oe = /* @__PURE__ */ S(re, [["render", de]]), he = { name: "CalendarDay", props: { day_key: { type: Number, required: !0 }, week: { type: Object, required: !0 }, day: { type: Object, required: !0 }, helpCalendar: { type: Object, required: !0 }, fConfigs: { type: Object, required: !0 }, calendar: { type: Object, required: !0 }, alwaysUseDefaultClasses: { type: Boolean, default: !1 } }, emits: ["clearRange", "dayMouseOver"], data() { return { toolTip: !1, onNumber: !1 // toolTipTxt }; }, computed: { startActive() { if (!this.fConfigs.isMultipleDateRange) return (this.day.isDateRangeStart || this.day.isMouseToLeft) && !this.day.hideLeftAndRightDays; "".inRange || this.inRangeInit(); const e = this.day.date.inRange(this.calendar.multipleDateRange), t = this.calendar.multipleDateRange[this.calendar.multipleDateRange.length - 1]; if (!t) return e; const a = ~this.calendar.multipleDateRange.map((i) => i.start).indexOf(this.day.date), r = ~this.calendar.multipleDateRange.map((i) => i.end).indexOf(this.day.date); return a === r && r ? e : a && ~a > -1 && this.calendar.multipleDateRange[~a].end || !t.start && !t.end ? a || e : (this.day.isDateRangeStart || this.day.isMouseToLeft) && !this.day.hideLeftAndRightDays || e; }, endActive() { if (!this.fConfigs.isMultipleDateRange) return (this.day.isDateRangeEnd || this.day.isMouseToRight) && !this.day.hideLeftAndRightDays; "".inRange || this.inRangeInit(); const e = this.day.date.inRange(this.calendar.multipleDateRange), t = this.calendar.multipleDateRange[this.calendar.multipleDateRange.length - 1]; if (!t) return e; const a = ~this.calendar.multipleDateRange.map((i) => i.start).indexOf(this.day.date), r = ~this.calendar.multipleDateRange.map((i) => i.end).indexOf(this.day.date); return a === r && r ? e : r ? !0 : !t.start && !t.end ? t.start === t.end ? !1 : r : (this.day.isDateRangeEnd || this.day.isMouseToRight) && !this.day.hideLeftAndRightDays || e; }, numberShow() { return this.fConfigs.isMultipleDateRange ? !!(~this.calendar.multipleDateRange.map((t) => t.end).indexOf(this.day.date) || ~this.calendar.multipleDateRange.map((t) => t.start).indexOf(this.day.date)) : !1; }, timesShow() { let e = this.calendar.multipleDateRange ? ~this.calendar.multipleDateRange.map((t) => t.end).indexOf(this.day.date) : -1; return this.fConfigs.isMultipleDateRange && e; }, getDaysNumber() { const e = this.calendar.multipleDateRange.map((i) => i.end).indexOf(this.day.date), t = this.calendar.multipleDateRange.map((i) => i.start).indexOf(this.day.date), a = this.calendar.multipleDateRange.map((i) => i.end).lastIndexOf(this.day.date), r = this.calendar.multipleDateRange.map((i) => i.start).lastIndexOf(this.day.date); return this.toolTip = e !== a || t !== r || e > -1 && t > -1 || t > -1 && e > -1, this.toolTip ? "·" : (e > -1 ? Number(e) : null) ?? t; } }, methods: { toolTipTxt() { const e = [], t = this.calendar.multipleDateRange.map((n) => n.end), a = this.calendar.multipleDateRange.map((n) => n.start); let r = 0, i = 0, s = t.indexOf(this.day.date, r); for (; ~t.indexOf(this.day.date, r); ) s = t.indexOf(this.day.date, r), e.push(s), r = s + 1; for (s = a.indexOf(this.day.date, i); ~a.indexOf(this.day.date, i); ) s = a.indexOf(this.day.date, i), e.push(s), i = s + 1; return e.sort((n, l) => n - l); }, inRangeInit() { //!!!!\\ const e = this.helpCalendar; String.prototype.inRange = function(t) { let a = !1; return t.forEach((r) => { const i = +e.getDateFromFormat(r.start.split(" ")[0]), s = +e.getDateFromFormat(r.end.split(" ")[0]), n = +e.getDateFromFormat(this.split(" ")[0]); i !== s && i && s && (a = a || i < n && n < s); }), a; }; //!!!!\\ }, clearRange() { this.$emit("clearRange", this.day.date); }, dayMouseOver() { this.$emit("dayMouseOver", this.day.date); }, hasSlot(e = "default") { return !!this.$parent.$parent.$slots[e]; }, isDisabledDate(e) { const t = this.fConfigs.disabledDates; return this.isDateIncludedInDatesCollection(e, t) || !this.isEnabledDate(e); }, isEnabledDate(e) { const t = this.fConfigs.enabledDates; return !t.length || this.isDateIncludedInDatesCollection(e, t); }, isDateIncludedInDatesCollection(e, t) { let a = /* @__PURE__ */ new Date(); a.setHours(0, 0, 0, 0); let r = this.helpCalendar.getDateFromFormat(e); return t.includes(e) || t.includes("beforeToday") && r.getTime() < a.getTime() || t.includes("afterToday") && r.getTime() > a.getTime(); }, getClassNames(e) { let t = []; (!this.hasSlot("default") || this.alwaysUseDefaultClasses) && t.push("vfc-span-day"); let a = this.helpCalendar.getDateFromFormat(e.date).getDay() - 1; a === -1 && (a = 6); let r = this.fConfigs.dayNames[a]; this.fConfigs.disabledDayNames.includes(r) && (e.hide = !0, t.push("vfc-cursor-not-allowed")); let i = this.helpCalendar.getDateFromFormat(e.date); if ((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0), this.isDisabledDate(e.date) && (t.push("vfc-disabled"), t.push("vfc-cursor-not-allowed")), this.fConfigs.limits) { let n = this.helpCalendar.getDateFromFormat(this.fConfigs.limits.min).getTime(), l = this.helpCalendar.getDateFromFormat(this.fConfigs.limits.max).getTime(); (i.getTime() < n || i.getTime() > l) && (t.push("vfc-disabled"), t.push("vfc-cursor-not-allowed")); } if (e.hide && t.push("vfc-hide"), e.isToday && t.push("vfc-today"), !e.hideLeftAndRightDays && !this.fConfigs.disabledDayNames.includes(r) && (e.isMarked ? t.push("vfc-marked") : e.isHovered && t.push("vfc-hovered"), this.fConfigs.markedDates.includes(e.date) && t.push("vfc-borderd"), Array.isArray(this.fConfigs.markedDateRange) ? this.fConfigs.markedDateRange.forEach((n) => { this.helpCalendar.getDateFromFormat(n.start) <= this.helpCalendar.getDateFromFormat(e.date) && this.helpCalendar.getDateFromFormat(n.end) >= this.helpCalendar.getDateFromFormat(e.date) && t.push("vfc-marked"), e.date === n.start ? t.push("vfc-start-marked") : e.date === n.end && t.push("vfc-end-marked"); }) : this.fConfigs.markedDateRange.start && this.fConfigs.markedDateRange.end ? (this.helpCalendar.getDateFromFormat( this.fConfigs.markedDateRange.start ) <= this.helpCalendar.getDateFromFormat(e.date) && this.helpCalendar.getDateFromFormat( this.fConfigs.markedDateRange.end ) >= this.helpCalendar.getDateFromFormat(e.date) && t.push("vfc-marked"), e.date === this.fConfigs.markedDateRange.start ? t.push("vfc-start-marked") : e.date === this.fConfigs.markedDateRange.end && t.push("vfc-end-marked")) : (this.fConfigs.markedDateRange.start && this.helpCalendar.getDateFromFormat( this.fConfigs.markedDateRange.start ) <= this.helpCalendar.getDateFromFormat(e.date) && t.push("vfc-marked"), this.fConfigs.markedDateRange.end && this.helpCalendar.getDateFromFormat( this.fConfigs.markedDateRange.end ) >= this.helpCalendar.getDateFromFormat(e.date) && t.push("vfc-marked")), t.push("vfc-hover")), this.fConfigs.isMultipleDateRange && ("".inRange || this.inRangeInit(), (e.isMarked || ~this.calendar.multipleDateRange.map((n) => n.start.split(" ")[0]).indexOf(e.date) || ~this.calendar.multipleDateRange.map((n) => n.end.split(" ")[0]).indexOf(e.date) || e.date.inRange(this.calendar.multipleDateRange)) && t.push("vfc-marked"), this.fConfigs.markedDates.includes(e.date) && t.push("vfc-borderd"), ~this.calendar.multipleDateRange.map((n) => n.start.split(" ")[0]).indexOf(e.date) && t.push("vfc-start-marked"), ~this.calendar.multipleDateRange.map((n) => n.end.split(" ")[0]).indexOf(e.date) && t.push("vfc-end-marked")), typeof this.fConfigs.markedDates == "object") { let n = this.fConfigs.markedDates.find((l) => l.date === e.date); typeof n < "u" && t.push(n.class); } return e.date === this.calendar.dateRange.start.split(" ")[0] && t.push("vfc-start-marked"), e.date === this.calendar.dateRange.end.split(" ")[0] && t.push("vfc-end-marked"), (e.date === this.calendar.selectedDate || Object.prototype.hasOwnProperty.call(this.calendar, "selectedDates") && this.calendar.selectedDates.find((n) => n.date === e.date)) && t.push("vfc-borderd"), t; } } }, fe = { class: "vfc-day" }, ce = { key: 0, class: "vfc-base-start" }, ge = { key: 1, class: "vfc-base-end" }; function ue(e, t, a, r, i, s) { return h(), c("div", fe, [ s.startActive ? (h(), c("div", ce)) : R("", !0), s.endActive ? (h(), c("div", ge)) : R("", !0), a.day.hideLeftAndRightDays ? R("", !0) : (h(), c("span", { key: 2, class: C(s.getClassNames(a.day)), onClick: t[3] || (t[3] = N((n) => e.$parent.$parent.clickDay(a.day, s.isDisabledDate), ["self"])), onMouseover: t[4] || (t[4] = (...n) => s.dayMouseOver && s.dayMouseOver(...n)) }, [ v(e.$slots, "default", { week: a.week, day: a.day }, () => [ A(k(a.day.day), 1) ], !0), s.timesShow ? (h(), c("span", { key: 0, onClick: t[0] || (t[0] = (...n) => s.clearRange && s.clearRange(...n)), class: "times" }, "×")) : R("", !0), s.numberShow ? (h(), c("span", { key: 1, onMouseover: t[1] || (t[1] = (n) => i.toolTip && (i.onNumber = !0)), onMouseleave: t[2] || (t[2] = (n) => i.onNumber = !1), class: "number" }, [ A(k(s.getDaysNumber) + " ", 1), E(g("div", { class: "toolTip" }, k(s.toolTipTxt().join(" ")), 513), [ [L, i.toolTip && i.onNumber] ]) ], 32)) : R("", !0) ], 34)) ]); } const me = /* @__PURE__ */ S(he, [["render", ue], ["__scopeId", "data-v-042468d1"]]), De = { name: "MonthYearPicker", props: { calendarKey: { type: Number, default: 0 }, changeYearStep: { type: Number, default: 3 } }, data() { return { delta: 0 }; }, watch: { delta(e) { e < -(/* @__PURE__ */ new Date()).getFullYear() && (this.delta = 0); } }, methods: { changePicker(e) { if (this.$parent.showMonthPicker) { e === "right" ? this.$parent.NextYear(this.calendarKey) : this.$parent.PreYear(this.calendarKey); return; } e === "right" ? this.delta += this.changeYearStep : this.delta -= this.changeYearStep; } } }, pe = { class: "vfc-months-container" }, Ce = { class: "vfc-content vfc-content-MY-picker" }, ye = { class: "vfc-navigation-buttons" }, ke = { class: "vfc-months" }, ve = ["onClick"], Re = ["onClick"]; function we(e, t, a, r, i, s) { return h(), c("div", pe, [ g("div", Ce, [ g("div", ye, [ g("div", { onClick: t[0] || (t[0] = (n) => s.changePicker("left")) }, t[3] || (t[3] = [ g("div", { class: "vfc-arrow-left" }, null, -1) ])), g("h2", { class: C(["vfc-top-date", i.delta !== 0 && "vfc-top-date-has-delta"]), onClick: t[1] || (t[1] = (n) => i.delta = 0) }, [ t[4] || (t[4] = g("span", { class: "vfc-popover-caret" }, null, -1)), A(" " + k(e.$parent.listCalendars[a.calendarKey].date.getFullYear()), 1) ], 2), g("div", { onClick: t[2] || (t[2] = (n) => s.changePicker("right")) }, t[5] || (t[5] = [ g("div", { class: "vfc-arrow-right" }, null, -1) ])) ]), g("div", ke, [ e.$parent.showMonthPicker ? (h(!0), c(w, { key: 0 }, T(e.$parent.fConfigs.shortMonthNames, (n, l) => (h(), c("div", { class: C(["vfc-item", { "vfc-selected": e.$parent.listCalendars[a.calendarKey].date.getMonth() === l }]), key: l, onClick: (o) => e.$parent.pickMonth(l, a.calendarKey) }, k(n), 11, ve))), 128)) : e.$parent.showYearPicker ? (h(!0), c(w, { key: 1 }, T(e.$parent.getYearList( e.$parent.listCalendars[a.calendarKey].date, i.delta ), (n, l) => (h(), c("div", { class: C(["vfc-item", { "vfc-selected": e.$parent.listCalendars[a.calendarKey].date.getFullYear() === n.year }]), key: l, onClick: (o) => e.$parent.pickYear(n.year, a.calendarKey) }, k(n.year), 11, Re))), 128)) : R("", !0) ]) ]) ]); } const Me = /* @__PURE__ */ S(De, [["render", we]]), Fe = { name: "PickerInputs", props: { fConfigs: { type: Object, required: !0 }, singleSelectedDate: { type: String, required: !0 }, calendar: { type: Object, required: !0 } }, emits: ["update:singleSelectedDate", "update:calendar"], computed: { dateRangeSelectedStartDate: { get() { return this.calendar.dateRange.start ? this.calendar.dateRange.start : ""; }, set(e) { if (e = this.helpCalendar.mask(e), this.helpCalendar.getDateFromFormat(e).getMonth()) { const t = { ...this.calendar, dateRange: { ...this.calendar.dateRange, start: e } }; this.$emit("update:calendar", t); } } }, dateRangeSelectedEndDate: { get() { return this.calendar.dateRange.end ? this.calendar.dateRange.end : ""; }, set(e) { if (e = this.helpCalendar.mask(e), this.helpCalendar.getDateFromFormat(e).getMonth()) { const t = { ...this.calendar, dateRange: { ...this.calendar.dateRange, end: e } }; this.$emit("update:calendar", t); } } } }, methods: { updateSingleDate(e) { this.$emit("update:singleSelectedDate", e.target.value); }, updateDateRangeStart(e) { this.dateRangeSelectedStartDate = e.target.value; }, updateDateRangeEnd(e) { this.dateRangeSelectedEndDate = e.target.value; }, updateSelectedDatesItem(e) { const t = { ...this.calendar, selectedDatesItem: e.target.value }; this.$emit("update:calendar", t); }, removeFromSelectedDates(e) { this.$parent.removeFromSelectedDates(e); } } }, Te = ["value", "placeholder", "readonly", "maxlength"], Se = ["value", "placeholder", "readonly", "maxlength"], be = ["value", "placeholder", "readonly", "maxlength"], Pe = { class: "vfc-tags-input-wrapper-default vfc-tags-input" }, $e = ["innerHTML"], Ae = ["onClick"], Ne = ["value"]; function Oe(e, t, a, r, i, s) { return h(), c("div", null, [ a.fConfigs.isModal && a.fConfigs.isDateRange ? (h(), c("div", { key: 0, class: C(["vfc-multiple-input", { "vfc-dark": a.fConfigs.isDark }]) }, [ v(e.$slots, "dateRangeInputs", { startDate: s.dateRangeSelectedStartDate, endDate: s.dateRangeSelectedEndDate, isTypeable: a.fConfigs.isTypeable }, () => [ g("input", { type: "text", title: "Start Date", value: s.dateRangeSelectedStartDate, onInput: t[0] || (t[0] = (...n) => s.updateDateRangeStart && s.updateDateRangeStart(...n)), placeholder: a.fConfigs.placeholder.split(" ")[0], readonly: !a.fConfigs.isTypeable, maxlength: a.fConfigs.dateFormat.length }, null, 40, Te), g("input", { type: "text", title: "End Date", value: s.dateRangeSelectedEndDate, onInput: t[1] || (t[1] = (...n) => s.updateDateRangeEnd && s.updateDateRangeEnd(...n)), placeholder: a.fConfigs.placeholder.split(" ")[0], readonly: !a.fConfigs.isTypeable, maxlength: a.fConfigs.dateFormat.length }, null, 40, Se) ]) ], 2)) : a.fConfigs.isModal && a.fConfigs.isDatePicker ? (h(), c("div", { key: 1, class: C({ "vfc-dark": a.fConfigs.isDark }) }, [ v(e.$slots, "datePickerInput", { selectedDate: a.singleSelectedDate, isTypeable: a.fConfigs.isTypeable }, () => [ g("input", { class: "vfc-single-input", type: "text", title: "Date", value: a.singleSelectedDate, onInput: t[2] || (t[2] = (...n) => s.updateSingleDate && s.updateSingleDate(...n)), placeholder: a.fConfigs.placeholder, readonly: !a.fConfigs.isTypeable, maxlength: a.fConfigs.dateFormat.length }, null, 40, be) ]) ], 2)) : a.fConfigs.isModal && a.fConfigs.isMultipleDatePicker ? (h(), c("div", { key: 2, class: C(["vfc-tags-input-root", { "vfc-dark": a.fConfigs.isDark }]) }, [ g("div", Pe, [ (h(!0), c(w, null, T(a.calendar.selectedDates, (n, l) => (h(), c("span", { class: "vfc-tags-input-badge vfc-tags-input-badge-pill vfc-tags-input-badge-selected-default", key: l }, [ g("span", { innerHTML: n.date }, null, 8, $e), g("a", { href: "#", class: "vfc-tags-input-remove", onClick: N((o) => s.removeFromSelectedDates(l), ["prevent"]) }, null, 8, Ae) ]))), 128)), g("input", { value: a.calendar.selectedDatesItem, onInput: t[3] || (t[3] = (...n) => s.updateSelectedDatesItem && s.updateSelectedDatesItem(...n)), onKeydown: t[4] || (t[4] = W(N((...n) => e.$parent.addToSelectedDates && e.$parent.addToSelectedDates(...n), ["prevent"]), ["enter"])), type: "text", placeholder: "Add a date" }, null, 40, Ne) ]) ], 2)) : R("", !0) ]); } const Ye = /* @__PURE__ */ S(Fe, [["render", Oe]]), Ee = { name: "CalendarFooter" }, Le = { class: "footerCon" }; function He(e, t, a, r, i, s) { return h(), c("div", Le, [ v(e.$slots, "cleaner", {}, void 0, !0), v(e.$slots, "footer", {}, void 0, !0) ]); } const Ie = /* @__PURE__ */ S(Ee, [["render", He], ["__scopeId", "data-v-41b323e9"]]), _e = (e, t) => !!e && !!t && (e === t || e.contains(t)), $ = () => (/* @__PURE__ */ new Date()).getUTCMilliseconds(), xe = { name: "FunctionalCalendar", components: { MonthYearPicker: Me, TimePicker: ae, PickerInputs: Ye, CalendarArrows: ne, CalendarFooter: Ie, CalendarDay: me, WeekNumbers: oe }, mixins: [U], computed: { startDMY() { return this.calendar.dateRange.start ? this.calendar.dateRange.start.split(" ")[0] : ""; }, endDMY() { return this.calendar.dateRange.end ? this.calendar.dateRange.end.split(" ")[0] : ""; }, rangeIsSelected() { return this.isMultipleDateRange ? this.calendar.multipleDateRange.length > 0 : !!(this.calendar.dateRange.end && this.calendar.dateRange.start); }, helpCalendar() { return new q( this.fConfigs.sundayStart, this.checkHiddenElement("leftAndRightDays"), this.fConfigs.dateFormat, this.fConfigs.dayNames ); }, singleSelectedDate: { get() { let e = ""; if (this.displayTimeInput) { const t = [ "HH:MM", "HH:mm", "hh:MM", "hh:mm", "MM:HH", "mm:HH", "MM:hh", "mm:hh" ]; let a = this.fConfigs.dateFormat; this.dateFormat && (a = this.dateFormat), t.indexOf(a.split(" ")[1]) > 3 ? e += " " + [this.calendar.selectedHour, this.calendar.selectedMinute].reverse().join(":") : e += " " + [this.calendar.selectedHour, this.calendar.selectedMinute].join( ":" ); } return this.calendar.selectedDate ? this.calendar.selectedDate + e : ""; }, set(e) { e = this.helpCalendar.mask(e), this.helpCalendar.getDateFromFormat(e).getMonth() && (this.calendar.selectedDate = e); } } }, created() { this.setConfigs(), this.initCalendar(); }, mounted() { this.displayTimeInput && (this.fConfigs.placeholder.split(" ")[1] || (this.fConfigs.placeholder += " hh:mm")), this.popoverElement = this.$refs.popoverElement, this.popoverElement.addEventListener("focusin", this.onFocusIn), this.popoverElement.addEventListener("focusout", this.onFocusOut), window.addEventListener("click", this.hideMonthYearPicker, { capture: !0 }), this.$watch( "modelValue", function(e) { if (typeof e == "object" && (Object.prototype.hasOwnProperty.call(e, "dateRange") || Object.prototype.hasOwnProperty.call(e, "selectedDate"))) this.calendar = e; else if (typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "multipleDateRange")) { this.calendar.multipleDateRange = e.multipleDateRange; const t = this.calendar.multipleDateRange[Math.max(0, this.calendar.multipleDateRange.length - 1)]; if (t && (t.start && !t.end || !t.start && t.end)) throw new Error("Invalid Data Range"); } }, { immediate: !0, deep: !0 } ), this.$watch( "showCalendar", function(e) { e ? this.$emit("opened") : this.$emit("closed"); }, { immediate: !0, deep: !0 } ); }, beforeUnmount: function() { window.removeEventListener("focusin", this.onFocusIn), window.removeEventListener("focusout", this.onFocusOut), window.removeEventListener("click", this.hideMonthYearPicker); }, watch: { enabledDates: { handler() { this.fConfigs.enabledDates = this.enabledDates; }, deep: !0 }, "configs.enabledDates": { handler() { this.fConfigs.enabledDates = this.configs.enabledDates; }, deep: !0 }, fConfigs: { handler() { this.markChooseDays(); }, deep: !0, immediate: !0 }, calendar: { handler() { this.markChooseDays(); }, deep: !0, immediate: !0 }, "calendar.currentDate": { handler(e) { this.$emit("input", this.calendar), this.checkLimits(e); } } }, methods: { initCalendar() { this.setCalendarData(), this.listRendering(), this.markChooseDays(), this.checkLimits(this.calendar.currentDate); }, updateCalendar() { this.setExistingCalendarData(), this.listRendering(), this.markChooseDays(); }, isNotSeparatelyAndFirst(e) { return this.isSeparately || e == 0; }, setCalendarData() { let e = this.calendar.currentDate; e = new Date(e.getFullYear(), e.getMonth() - 1), this.listCalendars = []; for (let t = 0; t < this.fConfigs.calendarsCount; t++) { e = new Date(e.getFullYear(), e.getMonth() + 1); let a = { key: t + $(), date: e, dateTop: `${this.fConfigs.monthNames[e.getMonth()]} ${e.getFullYear()}`, month: this.fConfigs.monthNames[e.getMonth()], year: e.getFullYear(), weeks: this.helpCalendar.getFinalizedWeeks( e.getMonth(), e.getFullYear() ) }; if (this.listCalendars.push(a), !this.fConfigs.isMultiple) break; } }, setExistingCalendarData() { for (let e = 0; e < this.listCalendars.length; e++) { let t = this.listCalendars[e], a = t.date; if (this.listCalendars[e] = { key: t.key, date: a, dateTop: `${this.fConfigs.monthNames[a.getMonth()]} ${a.getFullYear()}`, month: this.fConfigs.monthNames[a.getMonth()], year: a.getFullYear(), weeks: this.helpCalendar.getFinalizedWeeks( a.getMonth(), a.getFullYear() ) }, !this.fConfigs.isMultiple) break; } }, setConfigs() { let e; if (typeof this.$getOptions < "u" && (e = this.$getOptions(), Object.keys(e).forEach((t) => { typeof this.fConfigs[t] < "u" && (this.fConfigs[t] = e[t]); })), typeof this.configs < "u" ? Object.keys(this.fConfigs).forEach((t) => { typeof this.configs[t] < "u" && (this.fConfigs[t] = this.configs[t]); }) : Object.keys(this.$props).forEach((t) => { typeof this.fConfigs[t] < "u" && typeof this.$props[t] < "u" && (this.fConfigs[t] = this.$props[t]); }), this.fConfigs.isModal && (this.showCalendar = !1), this.fConfigs.placeholder || (this.fConfigs.placeholder = this.fConfigs.dateFormat), typeof this.newCurrentDate < "u" && (this.calendar.currentDate = this.newCurrentDate), this.fConfigs.sundayStart) { let t = [...this.fConfigs.dayNames], a = t[t.length - 1]; t.splice(t.length - 1, 1), t.unshift(a), this.fConfigs.dayNames = t; } }, listRendering() { this.listCalendars.forEach((e) => { e.weeks.forEach((t) => { let a = []; t.days.forEach((r) => { let i = new Date(r.year, r.month, r.day), s = /* @__PURE__ */ new Date(), n = !1; i.setHours(0, 0, 0, 0), s.setHours(0, 0, 0, 0), i.getTime() === s.getTime() && (n = !0); let l; typeof this.fConfigs.markedDates[0] == "object" ? l = this.fConfigs.markedDates.find((d) => d.date === this.helpCalendar.formatDate(i)) : l = this.fConfigs.markedDates.find((d) => d === this.helpCalendar.formatDate(i)), this.startDMY === this.helpCalendar.formatDate(i) && (l = !0); let o = !1; typeof l < "u" && (o = !0), a.push({ day: r.day, date: this.helpCalendar.formatDate(i), hide: r.hide, isMouseToLeft: !1, isMouseToRight: !1, isHovered: !1, isDateRangeStart: this.checkDateRangeStart( this.helpCalendar.formatDate(i) ), isDateRangeEnd: this.checkDateRangeEnd( this.helpCalendar.formatDate(i) ), hideLeftAndRightDays: r.hideLeftAndRightDays, isToday: n, isMarked: o }); }), t.days = a; }); }); }, clickDay(e, t) { if (this.fConfigs.withTimePicker && this.fConfigs.isDateRange && (e.date = e.date + " 00:00"), this.$emit("dayClicked", e), !this.fConfigs.isDateRange && !this.fConfigs.isDatePicker && !this.fConfigs.isMultipleDatePicker) return !1; let a = this.helpCalendar.getDateFromFormat(e.date).getDay() - 1; a === -1 && (a = 6); let r = this.fConfigs.dayNames[a]; if (this.fConfigs.disabledDayNames.includes(r) || t(e.date)) return !1; if (this.fConfigs.limits) { let i = this.helpCalendar.getDateFromFormat(this.fConfigs.limits.min).getTime(), s = this.helpCalendar.getDateFromFormat(this.fConfigs.limits.max).getTime(), n = this.helpCalendar.getDateFromFormat(e.date).getTime(); if (n < i || n > s) return !1; } if (this.fConfigs.isMultipleDateRange) { let i = this.helpCalendar.getDateFromFormat(e.date.split(" ")[0]).getTime(), s = this.calendar.multipleDateRange.length, n = this.calendar.multipleDateRange[s - 1], l = ""; if (n || (this.calendar.multipleDateRange.push({ end: "", start: "" }), s = this.calendar.multipleDateRange.length, n = this.calendar.multipleDateRange[s - 1]), n.start && (l = this.helpCalendar.getDateFromFormat(n.start)), n.start !== "" && n.end !== "" ? this.calendar.multipleDateRange.push({ end: "", start: e.date }) : n.start === "" && n.end === "" ? n.start = e.date : n.end === "" && i > l.getTime() ? n.end = e.date : n.start !== "" && i <= l.getTime() && (this.$nextTick(() => { this.calendar.withTimePicker && (this.$refs.timePicker.startDateActive = !0); }), n.end = n.start, n.start = e.date), n.start !== "" && n.end !== "") { let o = 864e5, d = this.helpCalendar.getDateFromFormat(n.start), m = this.helpCalendar.getDateFromFormat(n.end), u = Math.round( Math.abs((d.getTime() - m.getTime()) / o) ), p = this.helpCalendar.getDateFromFormat(e.date).getTime(); this.$emit("selectedDaysCount", u), this.fConfigs.isModal && this.fConfigs.isAutoCloseable && (this.showCalendar = !1); let f = this.fConfigs.minSelDays; f && p >= l.getTime() && u < f && (l.setDate(l.getDate() + (f - 1)), n.end = this.helpCalendar.formatDate(l)), f && p < l.getTime() && u < f && (l.setDate(l.getDate() - (f - 1)), n.start = this.helpCalendar.formatDate(l)); let D = this.fConfigs.maxSelDays; D && p >= l.getTime() && u >= D && (l.setDate(l.getDate() + (D - 1)), n.end = this.helpCalendar.formatDate(l)), D && p < l.getTime() && u >= D && (l.setDate(l.getDate() - (D - 1)), n.start = this.helpCalendar.formatDate(l)); } this.$emit("input", this.calendar); } else if (this.fConfigs.isDateRange) { let i = this.helpCalendar.getDateFromFormat(e.date.split(" ")[0]).getTime(), s = ""; if (this.calendar.dateRange.start && (s = this.helpCalendar.getDateFromFormat( this.calendar.dateRange.start )), this.calendar.dateRange.start !== "" && this.calendar.dateRange.end !== "" ? (this.calendar.dateRange.start = e.date, this.calendar.dateRange.end = "") : this.calendar.dateRange.start === "" && this.calendar.dateRange.end === "" ? this.calendar.dateRange.start = e.date : this.calendar.dateRange.end === "" && i > s.getTime() ? this.calendar.dateRange.end = e.date : this.calendar.dateRange.start !== "" && i <= s.getTime() && (this.$nextTick(() => { this.calendar.dateRange && this.calendar.withTimePicker && (this.$refs.timePicker.startDateActive = !0); }), thi