1858 lines
99 KiB
JavaScript
1858 lines
99 KiB
JavaScript
|
import { w as withInstall } from "../badge/index2.js";
|
||
|
|
import { getCurrentInstance, defineComponent, openBlock, createElementBlock, renderSlot, createElementVNode, toDisplayString, unref, computed, inject, Fragment, renderList, normalizeClass, ref, watch, createVNode, withCtx, createCommentVNode, onMounted, nextTick, createTextVNode, reactive, createBlock, provide, isRef } from "vue";
|
||
|
|
import { d as dayjs } from "../_chunks/dayjs/index.js";
|
||
|
|
import { _ as _sfc_main$a } from "../input/index2.js";
|
||
|
|
import { _ as _sfc_main$9 } from "../dropdown/index2.js";
|
||
|
|
import { c as createI18n, u as useI18n$1 } from "../_chunks/vue-i18n/index.js";
|
||
|
|
import { c as computed$1 } from "../_chunks/@vue/index.js";
|
||
|
|
var index = /* @__PURE__ */ (() => '.layui-dropdown{position:relative;display:inline-block}.layui-dropdown-content{position:absolute;z-index:99999;background-color:#fff;box-sizing:border-box;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px #0000001a}.layui-dropdown-content>.layui-dropdown-menu{border-radius:var(--global-border-radius);margin:5px 0}.layui-dropdown-content .layui-menu{position:relative;background-color:#fff}.layui-dropdown-content .layui-menu li,.layui-dropdown-content .layui-menu-body-title a{padding:5px 15px}.layui-dropdown-content .layui-menu li{position:relative;display:flex;margin:1px 0;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;cursor:pointer}.layui-dropdown-content .layui-menu li:hover{background-color:var(--global-neutral-color-2)}.layui-dropdown-content .layui-menu-body-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-dropdown-menu-prefix{margin-right:8px}.layui-dropdown-menu-suffix{margin-left:15px}.layui-dropdown-content .layui-menu li.layui-disabled:hover{background-color:inherit}:root{--input-border-radius: var(--global-border-radius);--input-border-color: var(--global-neutral-color-3)}.layui-input{width:100%;height:38px;line-height:38px;border-width:1px;border-style:solid;border-color:var(--input-border-color);border-radius:var(--input-border-radius);display:inline-flex}.layui-input input{height:38px;line-height:38px;background-color:#fff;color:#000000d9;padding-left:10px;display:inline-block;border:none;height:100%;width:100%}.layui-input-append{background-color:#fafafa;border-left:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-input-prepend{background-color:#fafafa;border-right:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-input-wrapper{width:100%;display:inline-flex;border:none}.layui-input:hover,.layui-input:focus-within{border-color:#d2d2d2}.layui-input-clear,.layui-input-prefix,.layui-input-suffix,.layui-input-password{background-color:#fff}.layui-input-clear,.layui-input-password,.layui-input-prefix,.layui-input-suffix{display:flex;flex:none;align-items:center;padding:0 10px}.layui-input-has-prefix input{padding:0}.layui-input-clear,.layui-input-password{color:#00000073}.layui-input-clear:hover{opacity:.6}.layui-input input::-webkit-input-placeholder{line-height:1.3}.layui-input input::-ms-reveal{display:none}.layui-input-disabled{border-color:var(--input-border-color)!important}.layui-input-disabled{opacity:.6}.layui-input-disabled,.layui-input-disabled *{cursor:not-allowed!important}.layui-input[size=lg]{height:44px}.layui-input[size=lg] .layui-input{height:44px;line-height:44px}.layui-input[size=md]{height:38px}.layui-input[size=md] .layui-input{height:38px;line-height:38px}.layui-input[size=sm]{height:32px}.layui-input[size=sm] .layui-input{height:32px;line-height:32px}.layui-input[size=xs]{height:26px}.layui-input[size=xs] .layui-input{height:26px;line-height:26px}.layui-date-picker[size=lg]{width:260px;height:44px}.layui-date-picker[size=lg] .layui-input{height:44px;line-height:44px}.layui-date-picker[size=md]{width:220px;height:38px}.layui-date-picker[size=md] .layui-input{height:38px;line-height:38px}.layui-date-picker[size=sm]{width:180px;height:32px}.layui-date-picker[size=sm] .layui-input{height:32px;line-height:32px}.layui-date-picker[size=xs]{width:140px;height:26px}.layui-date-picker[size=xs] .layui-input{height:26px;line-height:26px}.layui-date-range-picker[size=lg]{width:520px;height:44px}.layui-date-range-picker[size=lg] .layui-input{height:44px;line-height:44px}.layui-date-range-picker[size=md]{width:440px;height:38px}.layui-date-range-picker[size=md] .layui-input{height:38px;line-height:38px}.layui-date-range-picker[size=sm]{width:360px;height:32px}.layui-date-range-picker[size=sm] .layui-input{height:32px;line-height:32px}.layui-date-range-picker[size=xs]{width:280px;height:26px}.layui-date-range-picker[size=xs] .layui-input{height:26px;line-height:26px}@font-face{font-family:laydate-icon;src:url(data:u
|
||
|
|
const getYears = () => {
|
||
|
|
let years = [];
|
||
|
|
for (let i = 1970; i < getYear() + 100; i++) {
|
||
|
|
years.push(i);
|
||
|
|
}
|
||
|
|
return years;
|
||
|
|
};
|
||
|
|
const getDate = (val = "") => {
|
||
|
|
if (val) {
|
||
|
|
return new Date(val);
|
||
|
|
} else {
|
||
|
|
return new Date();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getYear = (val = "") => {
|
||
|
|
return getDate(val).getFullYear();
|
||
|
|
};
|
||
|
|
const getMonth = (val = "") => {
|
||
|
|
return getDate(val).getMonth();
|
||
|
|
};
|
||
|
|
const getDay = (val = "") => {
|
||
|
|
if (val) {
|
||
|
|
return new Date(getDate(val).toDateString()).getTime();
|
||
|
|
} else {
|
||
|
|
return -1;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getDayLength = (year, month) => {
|
||
|
|
return new Date(year, month + 1, 0).getDate();
|
||
|
|
};
|
||
|
|
const setDateList = (year, month) => {
|
||
|
|
const curDays = getDayLength(year, month);
|
||
|
|
const prevDays = getDayLength(year, month - 1);
|
||
|
|
const curFirstDayWeek = new Date(year, month, 1).getDay();
|
||
|
|
const list = [];
|
||
|
|
for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
|
||
|
|
list.push({
|
||
|
|
day: i,
|
||
|
|
value: +new Date(year, month - 1, i),
|
||
|
|
isRange: false,
|
||
|
|
isSelected: false,
|
||
|
|
type: "prev"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
for (let i = 1; i <= curDays; i++) {
|
||
|
|
list.push({
|
||
|
|
day: i,
|
||
|
|
value: +new Date(year, month, i),
|
||
|
|
isRange: false,
|
||
|
|
isSelected: false,
|
||
|
|
type: "current"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const nextDays = 7 - list.length % 7;
|
||
|
|
if (nextDays !== 7) {
|
||
|
|
for (let i = 1; i <= nextDays; i++) {
|
||
|
|
list.push({
|
||
|
|
day: i,
|
||
|
|
value: +new Date(year, month + 1, i),
|
||
|
|
isRange: false,
|
||
|
|
isSelected: false,
|
||
|
|
type: "next"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return list;
|
||
|
|
};
|
||
|
|
var zh_CN = {
|
||
|
|
input: {
|
||
|
|
placeholder: "\u8BF7\u8F93\u5165"
|
||
|
|
},
|
||
|
|
page: {
|
||
|
|
previous: "\u4E0A\u4E00\u9875",
|
||
|
|
next: "\u4E0B\u4E00\u9875",
|
||
|
|
goTo: "\u5230\u7B2C",
|
||
|
|
confirm: "\u786E\u8BA4",
|
||
|
|
page: "\u9875",
|
||
|
|
item: "\u6761",
|
||
|
|
total: "\u5171"
|
||
|
|
},
|
||
|
|
datePicker: {
|
||
|
|
year: "\u5E74",
|
||
|
|
month: "\u6708",
|
||
|
|
sunday: "\u65E5",
|
||
|
|
monday: "\u4E00",
|
||
|
|
tuesday: "\u4E8C",
|
||
|
|
wednesday: "\u4E09",
|
||
|
|
thursday: "\u56DB",
|
||
|
|
friday: "\u4E94",
|
||
|
|
saturday: "\u516D",
|
||
|
|
january: "1\u6708",
|
||
|
|
february: "2\u6708",
|
||
|
|
march: "3\u6708",
|
||
|
|
april: "4\u6708",
|
||
|
|
may: "5\u6708",
|
||
|
|
june: "6\u6708",
|
||
|
|
july: "7\u6708",
|
||
|
|
august: "8\u6708",
|
||
|
|
september: "9\u6708",
|
||
|
|
october: "10\u6708",
|
||
|
|
november: "11\u6708",
|
||
|
|
december: "12\u6708",
|
||
|
|
selectDate: "\u9009\u62E9\u65E5\u671F",
|
||
|
|
selectTime: "\u9009\u62E9\u65F6\u95F4",
|
||
|
|
selectYear: "\u9009\u62E9\u5E74\u4EFD",
|
||
|
|
selectMonth: "\u9009\u62E9\u6708\u4EFD",
|
||
|
|
clear: "\u6E05\u7A7A",
|
||
|
|
confirm: "\u786E\u8BA4",
|
||
|
|
cancel: "\u53D6\u6D88",
|
||
|
|
now: "\u73B0\u5728"
|
||
|
|
},
|
||
|
|
empty: {
|
||
|
|
description: "\u65E0\u6570\u636E"
|
||
|
|
},
|
||
|
|
upload: {
|
||
|
|
text: "\u4E0A\u4F20\u6587\u4EF6",
|
||
|
|
dragText: "\u70B9\u51FB\u4E0A\u4F20\uFF0C\u6216\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u6B64\u5904",
|
||
|
|
defaultErrorMsg: "\u4E0A\u4F20\u5931\u8D25",
|
||
|
|
urlErrorMsg: "\u4E0A\u4F20\u5730\u5740\u683C\u5F0F\u4E0D\u5408\u6CD5",
|
||
|
|
numberErrorMsg: "\u6587\u4EF6\u4E0A\u4F20\u8D85\u8FC7\u89C4\u5B9A\u7684\u4E2A\u6570",
|
||
|
|
cutInitErrorMsg: "\u526A\u88C1\u63D2\u4EF6\u521D\u59CB\u5316\u5931\u8D25",
|
||
|
|
uploadSuccess: "\u4E0A\u4F20\u6210\u529F",
|
||
|
|
cannotSupportCutMsg: "\u5F53\u524D\u7248\u672C\u6682\u4E0D\u652F\u6301\u5355\u6B21\u591A\u6587\u4EF6\u526A\u88C1,\u5C1D\u8BD5\u8BBE\u7F6E multiple \u4E3A false, \u901A\u8FC7 @done \u83B7\u53D6\u8FD4\u56DE\u6587\u4EF6\u5BF9\u8C61",
|
||
|
|
occurFileSizeErrorMsg: "\u6587\u4EF6\u5927\u5C0F\u8D85\u8FC7\u9650\u5236,\u6587\u4EF6\u6700\u5927\u4E0D\u53EF\u8D85\u8FC7\u4F20\u5165\u7684\u6307\u5B9Asize\u5C5E\u6027\u7684KB\u6570",
|
||
|
|
startUploadMsg: "\u5F00\u59CB\u4E0A\u4F20",
|
||
|
|
confirmBtn: "\u786E\u8BA4",
|
||
|
|
cancelBtn: "\u53D6\u6D88",
|
||
|
|
title: "\u6807\u9898"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var en_US = {
|
||
|
|
input: {
|
||
|
|
placeholder: "please input"
|
||
|
|
},
|
||
|
|
page: {
|
||
|
|
previous: "previous",
|
||
|
|
next: "next",
|
||
|
|
goTo: "Go to",
|
||
|
|
confirm: "confirm",
|
||
|
|
page: "page",
|
||
|
|
item: "item",
|
||
|
|
total: "total"
|
||
|
|
},
|
||
|
|
datePicker: {
|
||
|
|
year: "",
|
||
|
|
month: "month",
|
||
|
|
sunday: "SU",
|
||
|
|
monday: "MO",
|
||
|
|
tuesday: "TU",
|
||
|
|
wednesday: "WE",
|
||
|
|
thursday: "TH",
|
||
|
|
friday: "FR",
|
||
|
|
saturday: "SA",
|
||
|
|
january: "January",
|
||
|
|
february: "February",
|
||
|
|
march: "March",
|
||
|
|
april: "April",
|
||
|
|
may: "May",
|
||
|
|
june: "June",
|
||
|
|
july: "July",
|
||
|
|
august: "August",
|
||
|
|
september: "September",
|
||
|
|
october: "October",
|
||
|
|
november: "November",
|
||
|
|
december: "December",
|
||
|
|
selectDate: "select date",
|
||
|
|
selectTime: "select time",
|
||
|
|
selectYear: "select year",
|
||
|
|
selectMonth: "select month",
|
||
|
|
clear: "clear",
|
||
|
|
confirm: "confirm",
|
||
|
|
cancel: "cancel",
|
||
|
|
now: "now"
|
||
|
|
},
|
||
|
|
empty: {
|
||
|
|
description: "No data"
|
||
|
|
},
|
||
|
|
upload: {
|
||
|
|
text: "Upload files",
|
||
|
|
dragText: "Click Upload or drag the file here",
|
||
|
|
defaultErrorMsg: "Upload failed",
|
||
|
|
urlErrorMsg: "The upload address format is illegal",
|
||
|
|
numberErrorMsg: "The number of files uploaded exceeds the specified number",
|
||
|
|
cutInitErrorMsg: "Clipping plug-in initialization failed",
|
||
|
|
uploadSuccess: "Upload succeeded",
|
||
|
|
cannotSupportCutMsg: "The current version does not support single multiple file clipping. Try to set multiple to false, and get the returned file object through @ done",
|
||
|
|
occurFileSizeErrorMsg: "File size warning,The maximum file size cannot exceed target KB",
|
||
|
|
startUploadMsg: "Upload Start",
|
||
|
|
confirmBtn: "confirm",
|
||
|
|
cancelBtn: "cancel",
|
||
|
|
title: "title"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const i18n = createI18n({
|
||
|
|
legacy: false,
|
||
|
|
locale: "zh_CN",
|
||
|
|
messages: {
|
||
|
|
zh_CN,
|
||
|
|
en_US
|
||
|
|
}
|
||
|
|
});
|
||
|
|
function useI18n() {
|
||
|
|
var _a;
|
||
|
|
let i18nInstance;
|
||
|
|
const app = (_a = getCurrentInstance()) == null ? void 0 : _a.appContext.app;
|
||
|
|
try {
|
||
|
|
i18nInstance = useI18n$1();
|
||
|
|
} catch (e) {
|
||
|
|
app == null ? void 0 : app.use(i18n);
|
||
|
|
i18nInstance = useI18n$1();
|
||
|
|
}
|
||
|
|
return i18nInstance;
|
||
|
|
}
|
||
|
|
const _hoisted_1$8 = { class: "layui-laydate-footer" };
|
||
|
|
const _hoisted_2$8 = { class: "laydate-footer-btns" };
|
||
|
|
const __default__$8 = {
|
||
|
|
name: "PanelFoot"
|
||
|
|
};
|
||
|
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
||
|
|
...__default__$8,
|
||
|
|
emits: ["ok", "clear", "now"],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const handelOk = () => {
|
||
|
|
emits("ok");
|
||
|
|
};
|
||
|
|
const handelNow = () => {
|
||
|
|
emits("now");
|
||
|
|
};
|
||
|
|
const handelClear = () => {
|
||
|
|
emits("clear");
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$8, [
|
||
|
|
renderSlot(_ctx.$slots, "default"),
|
||
|
|
createElementVNode("div", _hoisted_2$8, [
|
||
|
|
createElementVNode("span", {
|
||
|
|
"lay-type": "clear",
|
||
|
|
class: "laydate-btns-clear",
|
||
|
|
onClick: handelClear
|
||
|
|
}, toDisplayString(unref(t)("datePicker.clear")), 1),
|
||
|
|
createElementVNode("span", {
|
||
|
|
"lay-type": "now",
|
||
|
|
class: "laydate-btns-now",
|
||
|
|
onClick: handelNow
|
||
|
|
}, toDisplayString(unref(t)("datePicker.now")), 1),
|
||
|
|
createElementVNode("span", {
|
||
|
|
"lay-type": "confirm",
|
||
|
|
class: "laydate-btns-confirm",
|
||
|
|
onClick: handelOk
|
||
|
|
}, toDisplayString(unref(t)("datePicker.confirm")), 1)
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$7 = { class: "layui-laydate-content" };
|
||
|
|
const _hoisted_2$7 = { style: { "width": "100%" } };
|
||
|
|
const _hoisted_3$7 = ["data-unix", "onClick", "onMouseenter"];
|
||
|
|
const __default__$7 = {
|
||
|
|
name: "DateContent"
|
||
|
|
};
|
||
|
|
const _sfc_main$7 = defineComponent({
|
||
|
|
...__default__$7,
|
||
|
|
props: {
|
||
|
|
dateList: { default: [] },
|
||
|
|
modelValue: { default: -1 },
|
||
|
|
startDate: { default: -1 },
|
||
|
|
endDate: { default: -1 },
|
||
|
|
hoverDate: { default: -1 }
|
||
|
|
},
|
||
|
|
emits: [
|
||
|
|
"update:modelValue",
|
||
|
|
"update:startDate",
|
||
|
|
"update:endDate",
|
||
|
|
"update:hoverDate",
|
||
|
|
"simple"
|
||
|
|
],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const { t } = useI18n();
|
||
|
|
const WEEK_NAME = computed(() => [
|
||
|
|
t("datePicker.sunday"),
|
||
|
|
t("datePicker.monday"),
|
||
|
|
t("datePicker.tuesday"),
|
||
|
|
t("datePicker.wednesday"),
|
||
|
|
t("datePicker.thursday"),
|
||
|
|
t("datePicker.friday"),
|
||
|
|
t("datePicker.saturday")
|
||
|
|
]);
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const handleDayClick = (item) => {
|
||
|
|
if (datePicker.range) {
|
||
|
|
if (item.type !== "current") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (props.startDate === -1 && props.endDate === -1) {
|
||
|
|
emits("update:startDate", item.value);
|
||
|
|
} else if (props.startDate !== -1 && props.endDate !== -1) {
|
||
|
|
emits("update:hoverDate", item.value);
|
||
|
|
emits("update:startDate", item.value);
|
||
|
|
emits("update:endDate", -1);
|
||
|
|
} else if (props.startDate !== -1 && props.endDate === -1) {
|
||
|
|
emits("update:endDate", item.value);
|
||
|
|
if (item.value < props.startDate) {
|
||
|
|
const first = props.startDate;
|
||
|
|
const last = item.value;
|
||
|
|
emits("update:startDate", last);
|
||
|
|
emits("update:endDate", first);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
emits("update:modelValue", item.value);
|
||
|
|
if (item.type !== "current") {
|
||
|
|
datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
|
||
|
|
}
|
||
|
|
if (datePicker.simple) {
|
||
|
|
emits("simple");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const dayItemMouseEnter = (event, item) => {
|
||
|
|
if (!datePicker.range) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (props.startDate === -1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (item.type !== "current") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (props.startDate !== -1 && props.endDate !== -1) {
|
||
|
|
emits("update:hoverDate", -1);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
emits("update:hoverDate", parseInt(event.target.dataset.unix));
|
||
|
|
};
|
||
|
|
const ifHasRangeHoverClass = computed(() => {
|
||
|
|
return function(item) {
|
||
|
|
if (!datePicker.range) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (props.startDate === -1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (item.type !== "current") {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (props.hoverDate === -1 && props.endDate === -1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
|
||
|
|
let max = props.startDate > hover ? props.startDate : hover;
|
||
|
|
let min = props.startDate < hover ? props.startDate : hover;
|
||
|
|
if (item.value >= min && item.value <= max) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
});
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$7, [
|
||
|
|
createElementVNode("table", _hoisted_2$7, [
|
||
|
|
createElementVNode("thead", null, [
|
||
|
|
createElementVNode("tr", null, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(WEEK_NAME), (item) => {
|
||
|
|
return openBlock(), createElementBlock("th", { key: item }, toDisplayString(item), 1);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createElementVNode("tbody", null, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.dateList.length % 7 == 0 ? __props.dateList.length / 7 : Math.floor(__props.dateList.length / 7) + 1, (o, i) => {
|
||
|
|
return openBlock(), createElementBlock("tr", { key: i }, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.dateList.slice(i * 7, i * 7 + 7), (item, index2) => {
|
||
|
|
return openBlock(), createElementBlock("td", {
|
||
|
|
key: index2,
|
||
|
|
"data-unix": item.value,
|
||
|
|
class: normalizeClass({
|
||
|
|
"laydate-day-prev": item.type !== "current",
|
||
|
|
"layui-this": item.value === __props.modelValue || unref(datePicker).range && item.type === "current" && (item.value == __props.startDate || item.value == __props.endDate),
|
||
|
|
"laydate-range-hover": unref(ifHasRangeHoverClass)(item),
|
||
|
|
"layui-disabled": item.type !== "current" && unref(datePicker).range
|
||
|
|
}),
|
||
|
|
onClick: ($event) => handleDayClick(item),
|
||
|
|
onMouseenter: ($event) => dayItemMouseEnter($event, item)
|
||
|
|
}, toDisplayString(item.day), 43, _hoisted_3$7);
|
||
|
|
}), 128))
|
||
|
|
]);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$6 = { class: "layui-laydate" };
|
||
|
|
const _hoisted_2$6 = { class: "layui-laydate-main laydate-main-list-0" };
|
||
|
|
const _hoisted_3$6 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_4$5 = { class: "laydate-set-ym" };
|
||
|
|
const __default__$6 = {
|
||
|
|
name: "DatePanel"
|
||
|
|
};
|
||
|
|
const _sfc_main$6 = defineComponent({
|
||
|
|
...__default__$6,
|
||
|
|
props: {
|
||
|
|
modelValue: null
|
||
|
|
},
|
||
|
|
emits: ["update:modelValue", "ok"],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const { t } = useI18n();
|
||
|
|
const Day = ref(props.modelValue);
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const dateList = ref([]);
|
||
|
|
const MONTH_NAME = computed(() => [
|
||
|
|
t("datePicker.january"),
|
||
|
|
t("datePicker.february"),
|
||
|
|
t("datePicker.march"),
|
||
|
|
t("datePicker.april"),
|
||
|
|
t("datePicker.may"),
|
||
|
|
t("datePicker.june"),
|
||
|
|
t("datePicker.july"),
|
||
|
|
t("datePicker.august"),
|
||
|
|
t("datePicker.september"),
|
||
|
|
t("datePicker.october"),
|
||
|
|
t("datePicker.november"),
|
||
|
|
t("datePicker.december")
|
||
|
|
]);
|
||
|
|
watch([datePicker.currentYear, datePicker.currentMonth], () => {
|
||
|
|
dateList.value = setDateList(datePicker.currentYear.value, datePicker.currentMonth.value);
|
||
|
|
}, { immediate: true });
|
||
|
|
watch(() => props.modelValue, () => {
|
||
|
|
Day.value = props.modelValue;
|
||
|
|
});
|
||
|
|
const changeYearOrMonth = (type, num) => {
|
||
|
|
if (type === "year") {
|
||
|
|
datePicker.currentYear.value += num;
|
||
|
|
} else {
|
||
|
|
let month = datePicker.currentMonth.value + num;
|
||
|
|
if (month > 11) {
|
||
|
|
month = 0;
|
||
|
|
datePicker.currentYear.value++;
|
||
|
|
} else if (month < 0) {
|
||
|
|
month = 11;
|
||
|
|
datePicker.currentYear.value--;
|
||
|
|
}
|
||
|
|
datePicker.currentMonth.value = month;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const footOnOk = () => {
|
||
|
|
emits("update:modelValue", Day.value);
|
||
|
|
datePicker.ok();
|
||
|
|
};
|
||
|
|
const footOnNow = () => {
|
||
|
|
datePicker.currentYear.value = dayjs().year();
|
||
|
|
datePicker.currentMonth.value = dayjs().month();
|
||
|
|
Day.value = new Date(new Date().toDateString()).getTime();
|
||
|
|
};
|
||
|
|
const footOnClear = () => {
|
||
|
|
Day.value = -1;
|
||
|
|
};
|
||
|
|
const ChildUpdateModelValue = () => {
|
||
|
|
emits("update:modelValue", Day.value);
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$6, [
|
||
|
|
createElementVNode("div", _hoisted_2$6, [
|
||
|
|
createElementVNode("div", _hoisted_3$6, [
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-prev-y",
|
||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => changeYearOrMonth("year", -1))
|
||
|
|
}, "\uE65A"),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-prev-m",
|
||
|
|
onClick: _cache[1] || (_cache[1] = ($event) => changeYearOrMonth("month", -1))
|
||
|
|
}, "\uE603"),
|
||
|
|
createElementVNode("div", _hoisted_4$5, [
|
||
|
|
createElementVNode("span", {
|
||
|
|
onClick: _cache[2] || (_cache[2] = ($event) => unref(datePicker).showPanel.value = "year")
|
||
|
|
}, toDisplayString(unref(datePicker).currentYear.value) + " " + toDisplayString(unref(t)("datePicker.year")), 1),
|
||
|
|
createElementVNode("span", {
|
||
|
|
onClick: _cache[3] || (_cache[3] = ($event) => unref(datePicker).showPanel.value = "month")
|
||
|
|
}, toDisplayString(unref(MONTH_NAME)[unref(datePicker).currentMonth.value]), 1)
|
||
|
|
]),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-next-m",
|
||
|
|
onClick: _cache[4] || (_cache[4] = ($event) => changeYearOrMonth("month", 1))
|
||
|
|
}, "\uE602"),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-next-y",
|
||
|
|
onClick: _cache[5] || (_cache[5] = ($event) => changeYearOrMonth("year", 1))
|
||
|
|
}, "\uE65B")
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$7, {
|
||
|
|
"date-list": dateList.value,
|
||
|
|
modelValue: Day.value,
|
||
|
|
"onUpdate:modelValue": [
|
||
|
|
_cache[6] || (_cache[6] = ($event) => Day.value = $event),
|
||
|
|
ChildUpdateModelValue
|
||
|
|
],
|
||
|
|
onSimple: footOnOk
|
||
|
|
}, null, 8, ["date-list", "modelValue"]),
|
||
|
|
createVNode(_sfc_main$8, {
|
||
|
|
onOk: footOnOk,
|
||
|
|
onNow: footOnNow,
|
||
|
|
onClear: footOnClear
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
unref(datePicker).type === "datetime" ? (openBlock(), createElementBlock("span", {
|
||
|
|
key: 0,
|
||
|
|
onClick: _cache[7] || (_cache[7] = ($event) => unref(datePicker).showPanel.value = "time"),
|
||
|
|
class: "laydate-btns-time"
|
||
|
|
}, toDisplayString(unref(t)("datePicker.selectTime")), 1)) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
})
|
||
|
|
])
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$5 = { class: "layui-laydate" };
|
||
|
|
const _hoisted_2$5 = { class: "layui-laydate-main laydate-main-list-0 laydate-time-show" };
|
||
|
|
const _hoisted_3$5 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_4$4 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_5$4 = { class: "laydate-time-text" };
|
||
|
|
const _hoisted_6$4 = {
|
||
|
|
class: "layui-laydate-content",
|
||
|
|
style: { "height": "210px" }
|
||
|
|
};
|
||
|
|
const _hoisted_7$4 = ["data-type"];
|
||
|
|
const _hoisted_8$2 = ["id", "data-value", "data-type"];
|
||
|
|
const __default__$5 = {
|
||
|
|
name: "TimePanel"
|
||
|
|
};
|
||
|
|
const _sfc_main$5 = defineComponent({
|
||
|
|
...__default__$5,
|
||
|
|
props: {
|
||
|
|
modelValue: null
|
||
|
|
},
|
||
|
|
emits: ["update:modelValue", "ok"],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const { t } = useI18n();
|
||
|
|
const els = [
|
||
|
|
{ count: 24, type: "hh" },
|
||
|
|
{ count: 60, type: "mm" },
|
||
|
|
{ count: 60, type: "ss" }
|
||
|
|
];
|
||
|
|
const hms = ref({
|
||
|
|
hh: props.modelValue.hh,
|
||
|
|
mm: props.modelValue.mm,
|
||
|
|
ss: props.modelValue.ss
|
||
|
|
});
|
||
|
|
const chooseTime = (e) => {
|
||
|
|
if (e.target.nodeName == "LI") {
|
||
|
|
let { value, type } = e.target.dataset;
|
||
|
|
hms.value[type] = parseInt(value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const timePanelRef = ref();
|
||
|
|
onMounted(() => {
|
||
|
|
scrollTo();
|
||
|
|
});
|
||
|
|
watch(() => props.modelValue, () => {
|
||
|
|
hms.value = {
|
||
|
|
hh: props.modelValue.hh,
|
||
|
|
mm: props.modelValue.mm,
|
||
|
|
ss: props.modelValue.ss
|
||
|
|
};
|
||
|
|
}, { deep: true });
|
||
|
|
const scrollTo = () => {
|
||
|
|
nextTick(() => {
|
||
|
|
timePanelRef.value.childNodes.forEach((element) => {
|
||
|
|
if (element.nodeName === "LI") {
|
||
|
|
let scrollTop = 0;
|
||
|
|
let parentDom = element.firstElementChild;
|
||
|
|
let childList = parentDom.childNodes;
|
||
|
|
for (let index2 = 0; index2 < childList.length; index2++) {
|
||
|
|
const child = childList[index2];
|
||
|
|
if (child.nodeName !== "LI") {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
if (child.classList && child.classList.contains("layui-this")) {
|
||
|
|
scrollTop = child.offsetTop - (parentDom.offsetHeight - child.offsetHeight) / 2;
|
||
|
|
parentDom.scrollTo(0, scrollTop);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const footOnOk = () => {
|
||
|
|
emits("update:modelValue", hms.value);
|
||
|
|
if (datePicker.range) {
|
||
|
|
emits("ok");
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
datePicker.ok();
|
||
|
|
if (datePicker.type === "datetime") {
|
||
|
|
datePicker.showPanel.value = "date";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const footOnNow = () => {
|
||
|
|
hms.value.hh = dayjs().hour();
|
||
|
|
hms.value.mm = dayjs().minute();
|
||
|
|
hms.value.ss = dayjs().second();
|
||
|
|
scrollTo();
|
||
|
|
};
|
||
|
|
const footOnClear = () => {
|
||
|
|
hms.value.hh = 0;
|
||
|
|
hms.value.mm = 0;
|
||
|
|
hms.value.ss = 0;
|
||
|
|
scrollTo();
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$5, [
|
||
|
|
createElementVNode("div", _hoisted_2$5, [
|
||
|
|
createElementVNode("div", _hoisted_3$5, [
|
||
|
|
createElementVNode("div", _hoisted_4$4, [
|
||
|
|
createElementVNode("span", _hoisted_5$4, toDisplayString(unref(t)("datePicker.selectTime")), 1)
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createElementVNode("div", _hoisted_6$4, [
|
||
|
|
createElementVNode("ul", {
|
||
|
|
class: "layui-laydate-list laydate-time-list",
|
||
|
|
ref_key: "timePanelRef",
|
||
|
|
ref: timePanelRef
|
||
|
|
}, [
|
||
|
|
(openBlock(), createElementBlock(Fragment, null, renderList(els, (item) => {
|
||
|
|
return createElementVNode("li", {
|
||
|
|
class: "num-list",
|
||
|
|
key: item.type,
|
||
|
|
"data-type": item.type
|
||
|
|
}, [
|
||
|
|
createElementVNode("ol", {
|
||
|
|
class: "scroll",
|
||
|
|
onClick: chooseTime
|
||
|
|
}, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(item.count, (it, index2) => {
|
||
|
|
return openBlock(), createElementBlock("li", {
|
||
|
|
id: item.type + index2.toString(),
|
||
|
|
"data-value": index2.toString().padStart(2, "0"),
|
||
|
|
"data-type": item.type,
|
||
|
|
key: it,
|
||
|
|
class: normalizeClass(["num", index2 == hms.value[item.type] ? "layui-this" : ""])
|
||
|
|
}, toDisplayString(index2.toString().padStart(2, "0")), 11, _hoisted_8$2);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
], 8, _hoisted_7$4);
|
||
|
|
}), 64))
|
||
|
|
], 512)
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$8, {
|
||
|
|
onOk: footOnOk,
|
||
|
|
onNow: footOnNow,
|
||
|
|
onClear: footOnClear
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
unref(datePicker).type === "datetime" && !unref(datePicker).range ? (openBlock(), createElementBlock("span", {
|
||
|
|
key: 0,
|
||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => unref(datePicker).showPanel.value = "datetime"),
|
||
|
|
class: "laydate-btns-time"
|
||
|
|
}, toDisplayString(unref(t)("datePicker.selectDate")), 1)) : !isNaN(hms.value.hh) && !isNaN(hms.value.mm) && !isNaN(hms.value.ss) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)().hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("HH:mm:ss")), 1)
|
||
|
|
], 64)) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$4 = { class: "layui-laydate" };
|
||
|
|
const _hoisted_2$4 = { class: "layui-laydate-main laydate-main-list-0 laydate-ym-show" };
|
||
|
|
const _hoisted_3$4 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_4$3 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_5$3 = { class: "laydate-time-text" };
|
||
|
|
const _hoisted_6$3 = { class: "layui-laydate-list laydate-year-list" };
|
||
|
|
const _hoisted_7$3 = ["onClick"];
|
||
|
|
const __default__$4 = {
|
||
|
|
name: "YearPanel"
|
||
|
|
};
|
||
|
|
const _sfc_main$4 = defineComponent({
|
||
|
|
...__default__$4,
|
||
|
|
props: {
|
||
|
|
modelValue: null,
|
||
|
|
max: { default: dayjs().year() + 100 }
|
||
|
|
},
|
||
|
|
emits: ["update:modelValue", "ok"],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const yearList = ref(getYears());
|
||
|
|
const unWatch = ref(false);
|
||
|
|
const Year = ref(props.modelValue);
|
||
|
|
const { t } = useI18n();
|
||
|
|
const handleYearClick = (item) => {
|
||
|
|
unWatch.value = true;
|
||
|
|
Year.value = item;
|
||
|
|
if (!datePicker.range) {
|
||
|
|
if (datePicker.type === "year") {
|
||
|
|
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||
|
|
} else if (datePicker.type === "yearmonth") {
|
||
|
|
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||
|
|
datePicker.showPanel.value = "month";
|
||
|
|
emits("update:modelValue", Year.value);
|
||
|
|
} else {
|
||
|
|
emits("update:modelValue", Year.value);
|
||
|
|
datePicker.showPanel.value = datePicker.type;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
unWatch.value = false;
|
||
|
|
}, 0);
|
||
|
|
if (datePicker.simple) {
|
||
|
|
footOnOk();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const ScrollRef = ref();
|
||
|
|
onMounted(() => {
|
||
|
|
scrollTo();
|
||
|
|
});
|
||
|
|
watch(() => Year, () => {
|
||
|
|
Year.value = props.modelValue;
|
||
|
|
});
|
||
|
|
const scrollTo = () => {
|
||
|
|
nextTick(() => {
|
||
|
|
let scrollTop = 0;
|
||
|
|
for (const child of ScrollRef.value.firstElementChild.childNodes) {
|
||
|
|
if (child.classList && child.classList.contains("layui-this")) {
|
||
|
|
scrollTop = child.offsetTop - (ScrollRef.value.offsetHeight - child.offsetHeight) / 2;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ScrollRef.value.scrollTo(0, scrollTop);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const footOnOk = () => {
|
||
|
|
emits("update:modelValue", Year.value ? Year.value : -1);
|
||
|
|
if (datePicker.range) {
|
||
|
|
emits("ok");
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
if (datePicker.type === "datetime" || datePicker.type === "date") {
|
||
|
|
datePicker.showPanel.value = datePicker.type;
|
||
|
|
} else {
|
||
|
|
datePicker.ok();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const footOnNow = () => {
|
||
|
|
Year.value = dayjs().year();
|
||
|
|
if (datePicker.type === "yearmonth") {
|
||
|
|
datePicker.currentMonth.value = dayjs().month();
|
||
|
|
}
|
||
|
|
scrollTo();
|
||
|
|
};
|
||
|
|
const footOnClear = () => {
|
||
|
|
Year.value = "";
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$4, [
|
||
|
|
createElementVNode("div", _hoisted_2$4, [
|
||
|
|
createElementVNode("div", _hoisted_3$4, [
|
||
|
|
createElementVNode("div", _hoisted_4$3, [
|
||
|
|
createElementVNode("span", _hoisted_5$3, toDisplayString(unref(t)("datePicker.selectYear")), 1)
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createElementVNode("div", {
|
||
|
|
class: "layui-laydate-content",
|
||
|
|
style: { "height": "220px", "overflow-y": "auto" },
|
||
|
|
ref_key: "ScrollRef",
|
||
|
|
ref: ScrollRef
|
||
|
|
}, [
|
||
|
|
createElementVNode("ul", _hoisted_6$3, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(yearList.value, (item) => {
|
||
|
|
return openBlock(), createElementBlock("li", {
|
||
|
|
key: item,
|
||
|
|
class: normalizeClass({ "layui-this": Year.value === item }),
|
||
|
|
onClick: ($event) => handleYearClick(item)
|
||
|
|
}, toDisplayString(item), 11, _hoisted_7$3);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
], 512),
|
||
|
|
createVNode(_sfc_main$8, {
|
||
|
|
onOk: footOnOk,
|
||
|
|
onNow: footOnNow,
|
||
|
|
onClear: footOnClear
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
unref(datePicker).type === "yearmonth" ? (openBlock(), createElementBlock("span", {
|
||
|
|
key: 0,
|
||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => unref(datePicker).showPanel.value = "month"),
|
||
|
|
class: "laydate-btns-time"
|
||
|
|
}, toDisplayString(unref(t)("datePicker.selectMonth")), 1)) : Year.value > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||
|
|
createTextVNode(toDisplayString(Year.value), 1)
|
||
|
|
], 64)) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$3 = { class: "layui-laydate" };
|
||
|
|
const _hoisted_2$3 = { class: "layui-laydate-main laydate-main-list-0 laydate-ym-show" };
|
||
|
|
const _hoisted_3$3 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_4$2 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_5$2 = {
|
||
|
|
class: "layui-laydate-content",
|
||
|
|
style: { "height": "220px" }
|
||
|
|
};
|
||
|
|
const _hoisted_6$2 = { class: "layui-laydate-list laydate-month-list" };
|
||
|
|
const _hoisted_7$2 = ["onClick"];
|
||
|
|
const __default__$3 = {
|
||
|
|
name: "TimePanel"
|
||
|
|
};
|
||
|
|
const _sfc_main$3 = defineComponent({
|
||
|
|
...__default__$3,
|
||
|
|
props: {
|
||
|
|
modelValue: null,
|
||
|
|
max: { default: dayjs().year() + 100 }
|
||
|
|
},
|
||
|
|
emits: ["update:modelValue", "ok"],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const Month = ref(props.modelValue);
|
||
|
|
const { t } = useI18n();
|
||
|
|
const MONTH_NAME = computed(() => [
|
||
|
|
t("datePicker.january"),
|
||
|
|
t("datePicker.february"),
|
||
|
|
t("datePicker.march"),
|
||
|
|
t("datePicker.april"),
|
||
|
|
t("datePicker.may"),
|
||
|
|
t("datePicker.june"),
|
||
|
|
t("datePicker.july"),
|
||
|
|
t("datePicker.august"),
|
||
|
|
t("datePicker.september"),
|
||
|
|
t("datePicker.october"),
|
||
|
|
t("datePicker.november"),
|
||
|
|
t("datePicker.december")
|
||
|
|
]);
|
||
|
|
const handleMonthClick = (item) => {
|
||
|
|
Month.value = MONTH_NAME.value.indexOf(item);
|
||
|
|
if (!datePicker.range) {
|
||
|
|
if (datePicker.type === "yearmonth") {
|
||
|
|
datePicker.currentDay.value = dayjs(datePicker.currentDay.value).month(MONTH_NAME.value.indexOf(item)).valueOf();
|
||
|
|
}
|
||
|
|
if (datePicker.type === "date" || datePicker.type === "datetime") {
|
||
|
|
emits("update:modelValue", MONTH_NAME.value.indexOf(item));
|
||
|
|
datePicker.showPanel.value = datePicker.type;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (datePicker.simple) {
|
||
|
|
footOnOk();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
watch(() => props.modelValue, () => {
|
||
|
|
Month.value = props.modelValue;
|
||
|
|
});
|
||
|
|
const footOnOk = () => {
|
||
|
|
emits("update:modelValue", Month.value ? Month.value : -1);
|
||
|
|
if (datePicker.range) {
|
||
|
|
emits("ok");
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
if (datePicker.type === "datetime" || datePicker.type === "date") {
|
||
|
|
datePicker.showPanel.value = datePicker.type;
|
||
|
|
} else {
|
||
|
|
datePicker.ok();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const footOnNow = () => {
|
||
|
|
Month.value = dayjs().month();
|
||
|
|
};
|
||
|
|
const footOnClear = () => {
|
||
|
|
Month.value = "";
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$3, [
|
||
|
|
createElementVNode("div", _hoisted_2$3, [
|
||
|
|
createElementVNode("div", _hoisted_3$3, [
|
||
|
|
createElementVNode("div", _hoisted_4$2, [
|
||
|
|
createElementVNode("span", {
|
||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => unref(datePicker).showPanel.value = "month")
|
||
|
|
}, toDisplayString(typeof Month.value !== "string" ? unref(MONTH_NAME)[Month.value] : unref(t)("datePicker.selectMonth")), 1)
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createElementVNode("div", _hoisted_5$2, [
|
||
|
|
createElementVNode("ul", _hoisted_6$2, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(MONTH_NAME), (item) => {
|
||
|
|
return openBlock(), createElementBlock("li", {
|
||
|
|
key: item,
|
||
|
|
class: normalizeClass({ "layui-this": unref(MONTH_NAME).indexOf(item) === Month.value }),
|
||
|
|
onClick: ($event) => handleMonthClick(item)
|
||
|
|
}, toDisplayString(item.slice(0, 3)), 11, _hoisted_7$2);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$8, {
|
||
|
|
onOk: footOnOk,
|
||
|
|
onNow: footOnNow,
|
||
|
|
onClear: footOnClear
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
unref(datePicker).type === "yearmonth" ? (openBlock(), createElementBlock("span", {
|
||
|
|
key: 0,
|
||
|
|
onClick: _cache[1] || (_cache[1] = ($event) => unref(datePicker).showPanel.value = "year"),
|
||
|
|
class: "laydate-btns-time"
|
||
|
|
}, toDisplayString(unref(t)("datePicker.selectYear")), 1)) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$2 = { style: { "display": "flex" } };
|
||
|
|
const _hoisted_2$2 = { class: "layui-laydate-main laydate-main-list-0" };
|
||
|
|
const _hoisted_3$2 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_4$1 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_5$1 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_6$1 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_7$1 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_8$1 = { class: "layui-laydate-main laydate-main-list-0" };
|
||
|
|
const _hoisted_9$1 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_10$1 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_11$1 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_12$1 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_13$1 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_14$1 = {
|
||
|
|
key: 0,
|
||
|
|
class: "layui-laydate-preview"
|
||
|
|
};
|
||
|
|
const __default__$2 = {
|
||
|
|
name: "DateRange"
|
||
|
|
};
|
||
|
|
const _sfc_main$2 = defineComponent({
|
||
|
|
...__default__$2,
|
||
|
|
props: {
|
||
|
|
startTime: null,
|
||
|
|
endTime: null
|
||
|
|
},
|
||
|
|
emits: [
|
||
|
|
"update:modelValue",
|
||
|
|
"update:startTime",
|
||
|
|
"update:endTime"
|
||
|
|
],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const { t } = useI18n();
|
||
|
|
const MONTH_NAME = computed(() => [
|
||
|
|
t("datePicker.january"),
|
||
|
|
t("datePicker.february"),
|
||
|
|
t("datePicker.march"),
|
||
|
|
t("datePicker.april"),
|
||
|
|
t("datePicker.may"),
|
||
|
|
t("datePicker.june"),
|
||
|
|
t("datePicker.july"),
|
||
|
|
t("datePicker.august"),
|
||
|
|
t("datePicker.september"),
|
||
|
|
t("datePicker.october"),
|
||
|
|
t("datePicker.november"),
|
||
|
|
t("datePicker.december")
|
||
|
|
]);
|
||
|
|
const prevDateList = ref([]);
|
||
|
|
const nextDateList = ref([]);
|
||
|
|
const startTime = reactive({
|
||
|
|
year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
|
||
|
|
month: props.startTime ? dayjs(props.startTime).month() : dayjs().month(),
|
||
|
|
day: props.startTime ? dayjs(props.startTime).startOf("day").valueOf() : -1,
|
||
|
|
hms: {
|
||
|
|
hh: props.startTime ? dayjs(props.startTime).hour() : 0,
|
||
|
|
mm: props.startTime ? dayjs(props.startTime).minute() : 0,
|
||
|
|
ss: props.startTime ? dayjs(props.startTime).second() : 0
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const endTime = reactive({
|
||
|
|
year: props.endTime ? dayjs(props.endTime).year() : dayjs().year(),
|
||
|
|
month: props.endTime ? dayjs(props.endTime).month() : dayjs().month(),
|
||
|
|
day: props.endTime ? dayjs(props.endTime).startOf("day").valueOf() : -1,
|
||
|
|
hms: {
|
||
|
|
hh: props.endTime ? dayjs(props.endTime).hour() : 0,
|
||
|
|
mm: props.endTime ? dayjs(props.endTime).minute() : 0,
|
||
|
|
ss: props.endTime ? dayjs(props.endTime).second() : 0
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const hoverDate = ref(-1);
|
||
|
|
const changeYearOrMonth = (type, num) => {
|
||
|
|
if (type === "year") {
|
||
|
|
startTime.year += num;
|
||
|
|
} else {
|
||
|
|
let month = startTime.month + num;
|
||
|
|
if (month > 11) {
|
||
|
|
month = 0;
|
||
|
|
startTime.year++;
|
||
|
|
} else if (month < 0) {
|
||
|
|
month = 11;
|
||
|
|
startTime.year--;
|
||
|
|
}
|
||
|
|
startTime.month = month;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
watch(() => [startTime.year, startTime.month], () => {
|
||
|
|
prevDateList.value = setDateList(startTime.year, startTime.month);
|
||
|
|
nextDateList.value = setDateList(startTime.year, startTime.month + 1);
|
||
|
|
}, { immediate: true });
|
||
|
|
const dropdownTimePanelRefLeft = ref();
|
||
|
|
const dropdownTimePanelRefRight = ref();
|
||
|
|
const dropdownYearPanelRefLeft = ref();
|
||
|
|
const dropdownYearPanelRefRight = ref();
|
||
|
|
const dropdownMonthPanelRefLeft = ref();
|
||
|
|
const dropdownMonthPanelRefRight = ref();
|
||
|
|
const closeTimePanel = () => {
|
||
|
|
if (dropdownTimePanelRefLeft.value)
|
||
|
|
dropdownTimePanelRefLeft.value.hide();
|
||
|
|
if (dropdownTimePanelRefRight.value)
|
||
|
|
dropdownTimePanelRefRight.value.hide();
|
||
|
|
if (dropdownYearPanelRefLeft.value)
|
||
|
|
dropdownYearPanelRefLeft.value.hide();
|
||
|
|
if (dropdownMonthPanelRefLeft.value)
|
||
|
|
dropdownMonthPanelRefLeft.value.hide();
|
||
|
|
};
|
||
|
|
const closeRightYearPanel = () => {
|
||
|
|
if (dropdownYearPanelRefRight.value)
|
||
|
|
dropdownYearPanelRefRight.value.hide();
|
||
|
|
startTime.year = endTime.year;
|
||
|
|
};
|
||
|
|
const closeRightMonthPanel = () => {
|
||
|
|
dropdownMonthPanelRefRight.value.hide();
|
||
|
|
let month = endTime.month - 1;
|
||
|
|
if (month > 11) {
|
||
|
|
month = 0;
|
||
|
|
startTime.year++;
|
||
|
|
} else if (month < 0) {
|
||
|
|
month = 11;
|
||
|
|
startTime.year--;
|
||
|
|
}
|
||
|
|
startTime.month = month;
|
||
|
|
};
|
||
|
|
const footOnOk = () => {
|
||
|
|
let format = datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
|
||
|
|
let startTimeVal = startTime.day !== -1 && endTime.day !== -1 ? dayjs(startTime.day).hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format(format) : "";
|
||
|
|
let endTimeVal = startTime.day !== -1 && endTime.day !== -1 ? dayjs(endTime.day).hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format(format) : "";
|
||
|
|
emits("update:startTime", startTimeVal);
|
||
|
|
emits("update:endTime", endTimeVal);
|
||
|
|
datePicker.ok();
|
||
|
|
};
|
||
|
|
const footOnNow = () => {
|
||
|
|
startTime.year = dayjs().year();
|
||
|
|
startTime.month = dayjs().month();
|
||
|
|
startTime.day = new Date(new Date().toDateString()).getTime();
|
||
|
|
startTime.hms.hh = dayjs().hour();
|
||
|
|
startTime.hms.mm = dayjs().minute();
|
||
|
|
startTime.hms.ss = dayjs().second();
|
||
|
|
endTime.day = -1;
|
||
|
|
};
|
||
|
|
const footOnClear = () => {
|
||
|
|
startTime.day = -1;
|
||
|
|
endTime.day = -1;
|
||
|
|
};
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", {
|
||
|
|
class: normalizeClass(["layui-laydate layui-laydate-range", "layui-laydate-range-" + unref(datePicker).showPanel.value])
|
||
|
|
}, [
|
||
|
|
createElementVNode("div", _hoisted_1$2, [
|
||
|
|
createElementVNode("div", _hoisted_2$2, [
|
||
|
|
createElementVNode("div", _hoisted_3$2, [
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-prev-y",
|
||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => changeYearOrMonth("year", -1))
|
||
|
|
}, "\uE65A"),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-prev-m",
|
||
|
|
onClick: _cache[1] || (_cache[1] = ($event) => changeYearOrMonth("month", -1))
|
||
|
|
}, "\uE603"),
|
||
|
|
createElementVNode("div", _hoisted_4$1, [
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownYearPanelRefLeft",
|
||
|
|
ref: dropdownYearPanelRefLeft
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$4, {
|
||
|
|
class: "time-panel",
|
||
|
|
modelValue: startTime.year,
|
||
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => startTime.year = $event),
|
||
|
|
onOk: closeTimePanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_5$1, toDisplayString(startTime.year || "--") + " " + toDisplayString(unref(t)("datePicker.year")), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512),
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownMonthPanelRefLeft",
|
||
|
|
ref: dropdownMonthPanelRefLeft
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$3, {
|
||
|
|
class: "time-panel",
|
||
|
|
modelValue: startTime.month,
|
||
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => startTime.month = $event),
|
||
|
|
onOk: closeTimePanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_6$1, toDisplayString(unref(MONTH_NAME)[startTime.month]), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512),
|
||
|
|
unref(datePicker).type === "datetime" ? (openBlock(), createBlock(_sfc_main$9, {
|
||
|
|
key: 0,
|
||
|
|
ref_key: "dropdownTimePanelRefLeft",
|
||
|
|
ref: dropdownTimePanelRefLeft
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
modelValue: startTime.hms,
|
||
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => startTime.hms = $event),
|
||
|
|
class: "time-panel",
|
||
|
|
onOk: closeTimePanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_7$1, toDisplayString(unref(dayjs)().hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format("HH:mm:ss")), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512)) : createCommentVNode("", true)
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$7, {
|
||
|
|
"date-list": prevDateList.value,
|
||
|
|
hoverDate: hoverDate.value,
|
||
|
|
"onUpdate:hoverDate": _cache[5] || (_cache[5] = ($event) => hoverDate.value = $event),
|
||
|
|
startDate: startTime.day,
|
||
|
|
"onUpdate:startDate": _cache[6] || (_cache[6] = ($event) => startTime.day = $event),
|
||
|
|
endDate: endTime.day,
|
||
|
|
"onUpdate:endDate": _cache[7] || (_cache[7] = ($event) => endTime.day = $event)
|
||
|
|
}, null, 8, ["date-list", "hoverDate", "startDate", "endDate"])
|
||
|
|
]),
|
||
|
|
createElementVNode("div", _hoisted_8$1, [
|
||
|
|
createElementVNode("div", _hoisted_9$1, [
|
||
|
|
createElementVNode("div", _hoisted_10$1, [
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownYearPanelRefRight",
|
||
|
|
ref: dropdownYearPanelRefRight
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$4, {
|
||
|
|
class: "time-panel",
|
||
|
|
modelValue: endTime.year,
|
||
|
|
"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => endTime.year = $event),
|
||
|
|
onOk: closeRightYearPanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_11$1, toDisplayString(startTime.month + 1 > 11 ? startTime.year + 1 : startTime.year) + " " + toDisplayString(unref(t)("datePicker.year")), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512),
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownMonthPanelRefRight",
|
||
|
|
ref: dropdownMonthPanelRefRight
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$3, {
|
||
|
|
class: "time-panel",
|
||
|
|
modelValue: endTime.month,
|
||
|
|
"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => endTime.month = $event),
|
||
|
|
onOk: closeRightMonthPanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_12$1, toDisplayString(unref(MONTH_NAME)[startTime.month + 1 > 11 ? startTime.month + 1 - 12 : startTime.month + 1]), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512),
|
||
|
|
unref(datePicker).type === "datetime" ? (openBlock(), createBlock(_sfc_main$9, {
|
||
|
|
key: 0,
|
||
|
|
ref_key: "dropdownTimePanelRefRight",
|
||
|
|
ref: dropdownTimePanelRefRight
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$5, {
|
||
|
|
modelValue: endTime.hms,
|
||
|
|
"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => endTime.hms = $event),
|
||
|
|
class: "time-panel",
|
||
|
|
onOk: closeTimePanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_13$1, toDisplayString(unref(dayjs)().hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format("HH:mm:ss")), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512)) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-next-m",
|
||
|
|
onClick: _cache[11] || (_cache[11] = ($event) => changeYearOrMonth("month", 1))
|
||
|
|
}, "\uE602"),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-next-y",
|
||
|
|
onClick: _cache[12] || (_cache[12] = ($event) => changeYearOrMonth("year", 1))
|
||
|
|
}, "\uE65B")
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$7, {
|
||
|
|
"date-list": nextDateList.value,
|
||
|
|
hoverDate: hoverDate.value,
|
||
|
|
"onUpdate:hoverDate": _cache[13] || (_cache[13] = ($event) => hoverDate.value = $event),
|
||
|
|
startDate: startTime.day,
|
||
|
|
"onUpdate:startDate": _cache[14] || (_cache[14] = ($event) => startTime.day = $event),
|
||
|
|
endDate: endTime.day,
|
||
|
|
"onUpdate:endDate": _cache[15] || (_cache[15] = ($event) => endTime.day = $event)
|
||
|
|
}, null, 8, ["date-list", "hoverDate", "startDate", "endDate"])
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$8, {
|
||
|
|
onOk: footOnOk,
|
||
|
|
onNow: footOnNow,
|
||
|
|
onClear: footOnClear
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
startTime.day !== -1 ? (openBlock(), createElementBlock("span", _hoisted_14$1, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)(startTime.day).format("YYYY-MM-DD")) + " ", 1),
|
||
|
|
unref(datePicker).type === "datetime" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)().hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format("HH:mm:ss")), 1)
|
||
|
|
], 64)) : createCommentVNode("", true),
|
||
|
|
createTextVNode(" " + toDisplayString(unref(datePicker).rangeSeparator) + " ", 1),
|
||
|
|
endTime.day !== -1 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)(endTime.day).format("YYYY-MM-DD")) + " ", 1),
|
||
|
|
unref(datePicker).type === "datetime" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)().hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format("HH:mm:ss")), 1)
|
||
|
|
], 64)) : createCommentVNode("", true)
|
||
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
||
|
|
createTextVNode(" -- ")
|
||
|
|
], 64))
|
||
|
|
])) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
})
|
||
|
|
], 2);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1$1 = { class: "layui-laydate layui-laydate-range" };
|
||
|
|
const _hoisted_2$1 = { style: { "display": "flex" } };
|
||
|
|
const _hoisted_3$1 = { class: "layui-laydate-main laydate-main-list-0" };
|
||
|
|
const _hoisted_4 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_5 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_6 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_7 = {
|
||
|
|
class: "layui-laydate-content",
|
||
|
|
style: { "height": "220px" }
|
||
|
|
};
|
||
|
|
const _hoisted_8 = { class: "layui-laydate-list laydate-month-list" };
|
||
|
|
const _hoisted_9 = ["data-unix", "onClick", "onMouseenter"];
|
||
|
|
const _hoisted_10 = { class: "layui-laydate-main laydate-main-list-0" };
|
||
|
|
const _hoisted_11 = { class: "layui-laydate-header" };
|
||
|
|
const _hoisted_12 = { class: "laydate-set-ym" };
|
||
|
|
const _hoisted_13 = { class: "laydate-range-time" };
|
||
|
|
const _hoisted_14 = {
|
||
|
|
class: "layui-laydate-content",
|
||
|
|
style: { "height": "220px" }
|
||
|
|
};
|
||
|
|
const _hoisted_15 = { class: "layui-laydate-list laydate-month-list" };
|
||
|
|
const _hoisted_16 = ["data-unix", "onClick", "onMouseenter"];
|
||
|
|
const _hoisted_17 = {
|
||
|
|
key: 0,
|
||
|
|
class: "layui-laydate-preview"
|
||
|
|
};
|
||
|
|
const __default__$1 = {
|
||
|
|
name: "MonthRange"
|
||
|
|
};
|
||
|
|
const _sfc_main$1 = defineComponent({
|
||
|
|
...__default__$1,
|
||
|
|
props: {
|
||
|
|
startTime: null,
|
||
|
|
endTime: null
|
||
|
|
},
|
||
|
|
emits: [
|
||
|
|
"update:modelValue",
|
||
|
|
"update:startTime",
|
||
|
|
"update:endTime"
|
||
|
|
],
|
||
|
|
setup(__props, { emit: emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const { t } = useI18n();
|
||
|
|
const datePicker = inject("datePicker");
|
||
|
|
const startTime = reactive({
|
||
|
|
year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
|
||
|
|
unix: props.startTime ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf() : -1
|
||
|
|
});
|
||
|
|
const endTime = reactive({
|
||
|
|
year: props.endTime ? dayjs(props.endTime).year() : dayjs().year() + 1,
|
||
|
|
unix: props.startTime ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() : -1
|
||
|
|
});
|
||
|
|
let hoverMonth = ref(-1);
|
||
|
|
const MONTH_NAME = computed(() => [
|
||
|
|
t("datePicker.january"),
|
||
|
|
t("datePicker.february"),
|
||
|
|
t("datePicker.march"),
|
||
|
|
t("datePicker.april"),
|
||
|
|
t("datePicker.may"),
|
||
|
|
t("datePicker.june"),
|
||
|
|
t("datePicker.july"),
|
||
|
|
t("datePicker.august"),
|
||
|
|
t("datePicker.september"),
|
||
|
|
t("datePicker.october"),
|
||
|
|
t("datePicker.november"),
|
||
|
|
t("datePicker.december")
|
||
|
|
]);
|
||
|
|
const changeYear = (num) => {
|
||
|
|
startTime.year += num;
|
||
|
|
};
|
||
|
|
const handleMonthClick = (item) => {
|
||
|
|
if (startTime.unix === -1 && endTime.unix === -1) {
|
||
|
|
startTime.unix = item;
|
||
|
|
} else if (startTime.unix !== -1 && endTime.unix !== -1) {
|
||
|
|
hoverMonth.value = -1;
|
||
|
|
startTime.unix = item;
|
||
|
|
endTime.unix = -1;
|
||
|
|
} else if (startTime.unix !== -1 && endTime.unix === -1) {
|
||
|
|
endTime.unix = item;
|
||
|
|
if (item < startTime.unix) {
|
||
|
|
const first = startTime.unix;
|
||
|
|
const last = item;
|
||
|
|
startTime.unix = last;
|
||
|
|
endTime.unix = first;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
watch(() => [props.startTime, props.endTime], () => {
|
||
|
|
startTime.year = props.startTime ? dayjs(props.startTime).year() : dayjs().year();
|
||
|
|
startTime.unix = props.startTime ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf() : -1;
|
||
|
|
endTime.year = props.endTime ? dayjs(props.endTime).year() : dayjs().year();
|
||
|
|
endTime.unix = props.startTime ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() : -1;
|
||
|
|
});
|
||
|
|
const dropdownYearPanelRefLeft = ref();
|
||
|
|
const dropdownYearPanelRefRight = ref();
|
||
|
|
const closeLeftYearPanel = () => {
|
||
|
|
if (dropdownYearPanelRefLeft.value)
|
||
|
|
dropdownYearPanelRefLeft.value.hide();
|
||
|
|
};
|
||
|
|
const closeRightYearPanel = () => {
|
||
|
|
if (dropdownYearPanelRefRight.value)
|
||
|
|
dropdownYearPanelRefRight.value.hide();
|
||
|
|
startTime.year = endTime.year;
|
||
|
|
};
|
||
|
|
const footOnOk = () => {
|
||
|
|
let format = "YYYY-MM";
|
||
|
|
let startTimeVal = startTime.unix !== -1 && endTime.unix !== -1 ? dayjs(startTime.unix).format(format) : "";
|
||
|
|
let endTimeVal = endTime.unix !== -1 && endTime.unix !== -1 ? dayjs(endTime.unix).format(format) : "";
|
||
|
|
emits("update:startTime", startTimeVal);
|
||
|
|
emits("update:endTime", endTimeVal);
|
||
|
|
datePicker.ok();
|
||
|
|
};
|
||
|
|
const footOnNow = () => {
|
||
|
|
startTime.year = dayjs().year();
|
||
|
|
startTime.unix = dayjs(startTime.year + "-" + (dayjs().month() + 1)).valueOf();
|
||
|
|
endTime.unix = -1;
|
||
|
|
hoverMonth.value = -1;
|
||
|
|
};
|
||
|
|
const footOnClear = () => {
|
||
|
|
startTime.unix = -1;
|
||
|
|
endTime.unix = -1;
|
||
|
|
hoverMonth.value = -1;
|
||
|
|
};
|
||
|
|
const monthItemMouseEnter = (event, item) => {
|
||
|
|
if (!datePicker.range) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (startTime.unix === -1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (hoverMonth.value !== -1 && endTime.unix !== -1) {
|
||
|
|
hoverMonth.value = -1;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
hoverMonth.value = parseInt(event.target.dataset.unix);
|
||
|
|
};
|
||
|
|
const ifHasRangeHoverClass = computed(() => {
|
||
|
|
return function(item) {
|
||
|
|
if (!datePicker.range) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (startTime.unix === -1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (hoverMonth.value === -1 && endTime.unix === -1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
let hover = endTime.unix !== -1 ? endTime.unix : hoverMonth.value;
|
||
|
|
let max = startTime.unix > hover ? startTime.unix : hover;
|
||
|
|
let min = startTime.unix < hover ? startTime.unix : hover;
|
||
|
|
if (item >= min && item <= max) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const getUnix = computed(() => {
|
||
|
|
return function(item, position) {
|
||
|
|
let month = MONTH_NAME.value.indexOf(item);
|
||
|
|
let year = position === "left" ? startTime.year : startTime.year + 1;
|
||
|
|
return dayjs(year + "-" + (month + 1)).valueOf();
|
||
|
|
};
|
||
|
|
});
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
||
|
|
createElementVNode("div", _hoisted_2$1, [
|
||
|
|
createElementVNode("div", _hoisted_3$1, [
|
||
|
|
createElementVNode("div", _hoisted_4, [
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-prev-y",
|
||
|
|
onClick: _cache[0] || (_cache[0] = ($event) => changeYear(-1))
|
||
|
|
}, "\uE65A"),
|
||
|
|
createElementVNode("div", _hoisted_5, [
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownYearPanelRefLeft",
|
||
|
|
ref: dropdownYearPanelRefLeft
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$4, {
|
||
|
|
class: "time-panel",
|
||
|
|
modelValue: startTime.year,
|
||
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => startTime.year = $event),
|
||
|
|
onOk: closeLeftYearPanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_6, toDisplayString(startTime.year || "--") + " " + toDisplayString(unref(t)("datePicker.year")), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512)
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createElementVNode("div", _hoisted_7, [
|
||
|
|
createElementVNode("ul", _hoisted_8, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(MONTH_NAME), (item) => {
|
||
|
|
return openBlock(), createElementBlock("li", {
|
||
|
|
key: item,
|
||
|
|
"data-unix": unref(getUnix)(item, "left"),
|
||
|
|
class: normalizeClass({
|
||
|
|
"layui-this": unref(getUnix)(item, "left") === startTime.unix || unref(getUnix)(item, "left") === endTime.unix,
|
||
|
|
"laydate-range-hover": unref(ifHasRangeHoverClass)(unref(getUnix)(item, "left"))
|
||
|
|
}),
|
||
|
|
onClick: ($event) => handleMonthClick(unref(getUnix)(item, "left")),
|
||
|
|
onMouseenter: ($event) => monthItemMouseEnter($event)
|
||
|
|
}, toDisplayString(item.slice(0, 3)), 43, _hoisted_9);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createElementVNode("div", _hoisted_10, [
|
||
|
|
createElementVNode("div", _hoisted_11, [
|
||
|
|
createElementVNode("div", _hoisted_12, [
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownYearPanelRefRight",
|
||
|
|
ref: dropdownYearPanelRefRight
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
createVNode(_sfc_main$4, {
|
||
|
|
class: "time-panel",
|
||
|
|
modelValue: endTime.year,
|
||
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => endTime.year = $event),
|
||
|
|
onOk: closeRightYearPanel
|
||
|
|
}, null, 8, ["modelValue"])
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
createElementVNode("span", _hoisted_13, toDisplayString(startTime.year + 1) + " " + toDisplayString(unref(t)("datePicker.year")), 1)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 512)
|
||
|
|
]),
|
||
|
|
createElementVNode("i", {
|
||
|
|
class: "layui-icon laydate-icon laydate-next-y",
|
||
|
|
onClick: _cache[3] || (_cache[3] = ($event) => changeYear(1))
|
||
|
|
}, "\uE65B")
|
||
|
|
]),
|
||
|
|
createElementVNode("div", _hoisted_14, [
|
||
|
|
createElementVNode("ul", _hoisted_15, [
|
||
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(MONTH_NAME), (item) => {
|
||
|
|
return openBlock(), createElementBlock("li", {
|
||
|
|
key: item,
|
||
|
|
"data-unix": unref(getUnix)(item, "right"),
|
||
|
|
class: normalizeClass({
|
||
|
|
"layui-this": unref(getUnix)(item, "right") === startTime.unix || unref(getUnix)(item, "right") === endTime.unix,
|
||
|
|
"laydate-range-hover": unref(ifHasRangeHoverClass)(unref(getUnix)(item, "right"))
|
||
|
|
}),
|
||
|
|
onClick: ($event) => handleMonthClick(unref(getUnix)(item, "right")),
|
||
|
|
onMouseenter: ($event) => monthItemMouseEnter($event)
|
||
|
|
}, toDisplayString(item.slice(0, 3)), 43, _hoisted_16);
|
||
|
|
}), 128))
|
||
|
|
])
|
||
|
|
])
|
||
|
|
])
|
||
|
|
]),
|
||
|
|
createVNode(_sfc_main$8, {
|
||
|
|
onOk: footOnOk,
|
||
|
|
onNow: footOnNow,
|
||
|
|
onClear: footOnClear
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
startTime.unix !== -1 ? (openBlock(), createElementBlock("span", _hoisted_17, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)(startTime.unix).format("YYYY-MM-DD")) + " " + toDisplayString(unref(datePicker).rangeSeparator) + " ", 1),
|
||
|
|
endTime.unix !== -1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
||
|
|
createTextVNode(toDisplayString(unref(dayjs)(endTime.unix).format("YYYY-MM-DD")), 1)
|
||
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||
|
|
createTextVNode(" -- ")
|
||
|
|
], 64))
|
||
|
|
])) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _hoisted_1 = ["size"];
|
||
|
|
const _hoisted_2 = {
|
||
|
|
key: 1,
|
||
|
|
class: "laydate-range-inputs"
|
||
|
|
};
|
||
|
|
const _hoisted_3 = { class: "range-separator" };
|
||
|
|
const __default__ = {
|
||
|
|
name: "LayDatePicker"
|
||
|
|
};
|
||
|
|
const _sfc_main = defineComponent({
|
||
|
|
...__default__,
|
||
|
|
props: {
|
||
|
|
type: { default: "date" },
|
||
|
|
placeholder: null,
|
||
|
|
modelValue: { default: "" },
|
||
|
|
disabled: { type: Boolean, default: false },
|
||
|
|
simple: { type: Boolean, default: false },
|
||
|
|
name: null,
|
||
|
|
max: null,
|
||
|
|
min: null,
|
||
|
|
range: { type: Boolean, default: false },
|
||
|
|
rangeSeparator: { default: "\u81F3" },
|
||
|
|
readonly: { type: Boolean, default: false },
|
||
|
|
allowClear: { type: Boolean, default: false },
|
||
|
|
size: { default: "md" },
|
||
|
|
prefixIcon: { default: "layui-icon-date" },
|
||
|
|
suffixIcon: { default: "" },
|
||
|
|
timestamp: { type: Boolean, default: false },
|
||
|
|
contentClass: null,
|
||
|
|
contentStyle: null
|
||
|
|
},
|
||
|
|
emits: ["update:modelValue", "change", "blur", "focus"],
|
||
|
|
setup(__props, { emit: $emits }) {
|
||
|
|
const props = __props;
|
||
|
|
const startPlaceholder = computed$1(() => {
|
||
|
|
if (Array.isArray(props.placeholder)) {
|
||
|
|
return props.placeholder[0];
|
||
|
|
}
|
||
|
|
return props.placeholder;
|
||
|
|
});
|
||
|
|
const endPlaceholder = computed$1(() => {
|
||
|
|
if (Array.isArray(props.placeholder)) {
|
||
|
|
return props.placeholder[1];
|
||
|
|
}
|
||
|
|
return props.placeholder;
|
||
|
|
});
|
||
|
|
const dropdownRef = ref(null);
|
||
|
|
const hms = ref({
|
||
|
|
hh: 0,
|
||
|
|
mm: 0,
|
||
|
|
ss: 0
|
||
|
|
});
|
||
|
|
const currentYear = ref(0);
|
||
|
|
const currentMonth = ref(0);
|
||
|
|
const currentDay = ref(0);
|
||
|
|
const showPanel = ref("date");
|
||
|
|
const rangeValue = reactive({ first: "", last: "" });
|
||
|
|
let unWatch = false;
|
||
|
|
const dateValue = props.range ? ref(["", ""]) : ref("");
|
||
|
|
const getDateValue = () => {
|
||
|
|
unWatch = true;
|
||
|
|
let dayjsVal;
|
||
|
|
switch (props.type) {
|
||
|
|
case "date":
|
||
|
|
dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).format("YYYY-MM-DD") : "";
|
||
|
|
break;
|
||
|
|
case "datetime":
|
||
|
|
dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("YYYY-MM-DD HH:mm:ss") : "";
|
||
|
|
break;
|
||
|
|
case "year":
|
||
|
|
dayjsVal = currentYear.value !== -1 ? dayjs().year(currentYear.value).format("YYYY") : "";
|
||
|
|
break;
|
||
|
|
case "month":
|
||
|
|
dayjsVal = currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : "";
|
||
|
|
break;
|
||
|
|
case "time":
|
||
|
|
dayjsVal = dayjs().hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("HH:mm:ss");
|
||
|
|
break;
|
||
|
|
case "yearmonth":
|
||
|
|
dayjsVal = currentYear.value !== -1 && currentMonth.value !== -1 ? dayjs().year(currentYear.value).month(currentMonth.value).format("YYYY-MM") : "";
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format() : "";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
dateValue.value = dayjsVal !== "Invalid Date" ? dayjsVal : "";
|
||
|
|
if (dayjsVal === "Invalid Date") {
|
||
|
|
unWatch = false;
|
||
|
|
$emits("update:modelValue", "");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (props.timestamp) {
|
||
|
|
$emits("update:modelValue", dayjs(dayjsVal).unix() * 1e3);
|
||
|
|
$emits("change", dayjs(dayjsVal).unix() * 1e3);
|
||
|
|
} else {
|
||
|
|
$emits("update:modelValue", dayjsVal);
|
||
|
|
$emits("change", dayjsVal);
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
unWatch = false;
|
||
|
|
}, 0);
|
||
|
|
};
|
||
|
|
const getDateValueByRange = () => {
|
||
|
|
unWatch = true;
|
||
|
|
if (rangeValue.first === "" || rangeValue.last === "") {
|
||
|
|
dateValue.value = ["", ""];
|
||
|
|
$emits("update:modelValue", dateValue.value);
|
||
|
|
$emits("change", dateValue.value);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let format = "YYYY-MM-DD";
|
||
|
|
switch (props.type) {
|
||
|
|
case "date":
|
||
|
|
format = "YYYY-MM-DD";
|
||
|
|
break;
|
||
|
|
case "datetime":
|
||
|
|
format = "YYYY-MM-DD HH:mm:ss";
|
||
|
|
break;
|
||
|
|
case "yearmonth":
|
||
|
|
format = "YYYY-MM";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
dateValue.value = [
|
||
|
|
dayjs(rangeValue.first).format(format),
|
||
|
|
dayjs(rangeValue.last).format(format)
|
||
|
|
];
|
||
|
|
$emits("update:modelValue", dateValue.value);
|
||
|
|
$emits("change", dateValue.value);
|
||
|
|
setTimeout(() => {
|
||
|
|
unWatch = false;
|
||
|
|
}, 0);
|
||
|
|
};
|
||
|
|
const ok = () => {
|
||
|
|
if (!props.range) {
|
||
|
|
getDateValue();
|
||
|
|
} else {
|
||
|
|
getDateValueByRange();
|
||
|
|
}
|
||
|
|
if (dropdownRef.value)
|
||
|
|
dropdownRef.value.hide();
|
||
|
|
showPanel.value = props.type;
|
||
|
|
};
|
||
|
|
watch(() => props.type, () => {
|
||
|
|
showPanel.value = props.type;
|
||
|
|
if (props.type === "yearmonth" && !props.range) {
|
||
|
|
showPanel.value = "year";
|
||
|
|
}
|
||
|
|
}, { immediate: true });
|
||
|
|
watch(() => props.modelValue, () => {
|
||
|
|
if (unWatch) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let initModelValue = props.range && props.modelValue ? props.modelValue[0] || "" : props.modelValue;
|
||
|
|
if (props.type === "month" || props.type === "year") {
|
||
|
|
initModelValue += "";
|
||
|
|
}
|
||
|
|
hms.value.hh = isNaN(dayjs(initModelValue).hour()) ? 0 : dayjs(initModelValue).hour();
|
||
|
|
hms.value.mm = isNaN(dayjs(initModelValue).minute()) ? 0 : dayjs(initModelValue).minute();
|
||
|
|
hms.value.ss = isNaN(dayjs(initModelValue).second()) ? 0 : dayjs(initModelValue).second();
|
||
|
|
if (initModelValue.length === 8 && props.type === "time") {
|
||
|
|
let modelValue = initModelValue;
|
||
|
|
modelValue = "1970-01-01 " + modelValue;
|
||
|
|
hms.value.hh = dayjs(modelValue).hour();
|
||
|
|
hms.value.mm = dayjs(modelValue).minute();
|
||
|
|
hms.value.ss = dayjs(modelValue).second();
|
||
|
|
}
|
||
|
|
currentYear.value = initModelValue ? getYear(initModelValue) : -1;
|
||
|
|
currentMonth.value = initModelValue ? getMonth(initModelValue) : -1;
|
||
|
|
currentDay.value = initModelValue ? getDay(initModelValue) : -1;
|
||
|
|
if (props.type === "date" || props.type === "datetime") {
|
||
|
|
if (currentYear.value === -1)
|
||
|
|
currentYear.value = dayjs().year();
|
||
|
|
if (currentMonth.value === -1)
|
||
|
|
currentMonth.value = dayjs().month();
|
||
|
|
if (props.timestamp) {
|
||
|
|
currentDay.value = initModelValue ? dayjs(parseInt(initModelValue)).startOf("date").unix() * 1e3 : -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
rangeValue.first = initModelValue;
|
||
|
|
rangeValue.last = props.range && props.modelValue ? props.modelValue[1] || "" : "";
|
||
|
|
if (!props.range) {
|
||
|
|
getDateValue();
|
||
|
|
} else {
|
||
|
|
getDateValueByRange();
|
||
|
|
}
|
||
|
|
}, { immediate: true });
|
||
|
|
const onChange = () => {
|
||
|
|
if (dropdownRef.value)
|
||
|
|
dropdownRef.value.hide();
|
||
|
|
$emits("update:modelValue", dateValue.value);
|
||
|
|
};
|
||
|
|
provide("datePicker", {
|
||
|
|
currentYear,
|
||
|
|
currentMonth,
|
||
|
|
currentDay,
|
||
|
|
dateValue,
|
||
|
|
type: props.type,
|
||
|
|
showPanel,
|
||
|
|
hms,
|
||
|
|
ok: () => ok(),
|
||
|
|
getDateValue: () => getDateValue,
|
||
|
|
range: props.range,
|
||
|
|
rangeValue,
|
||
|
|
rangeSeparator: props.rangeSeparator,
|
||
|
|
simple: props.simple,
|
||
|
|
timestamp: props.timestamp
|
||
|
|
});
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return openBlock(), createElementBlock("div", {
|
||
|
|
class: normalizeClass(["layui-date-picker", { "layui-date-range-picker": __props.range }]),
|
||
|
|
size: __props.size
|
||
|
|
}, [
|
||
|
|
createVNode(_sfc_main$9, {
|
||
|
|
ref_key: "dropdownRef",
|
||
|
|
ref: dropdownRef,
|
||
|
|
disabled: __props.disabled,
|
||
|
|
autoFitMinWidth: false,
|
||
|
|
contentClass: __props.contentClass,
|
||
|
|
contentStyle: __props.contentStyle,
|
||
|
|
updateAtScroll: ""
|
||
|
|
}, {
|
||
|
|
content: withCtx(() => [
|
||
|
|
!__props.range && (showPanel.value === "date" || showPanel.value === "datetime") ? (openBlock(), createBlock(_sfc_main$6, {
|
||
|
|
key: 0,
|
||
|
|
modelValue: currentDay.value,
|
||
|
|
"onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => currentDay.value = $event)
|
||
|
|
}, null, 8, ["modelValue"])) : createCommentVNode("", true),
|
||
|
|
!__props.range && showPanel.value === "time" ? (openBlock(), createBlock(_sfc_main$5, {
|
||
|
|
key: 1,
|
||
|
|
modelValue: hms.value,
|
||
|
|
"onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => hms.value = $event)
|
||
|
|
}, null, 8, ["modelValue"])) : createCommentVNode("", true),
|
||
|
|
!__props.range && (showPanel.value === "year" || showPanel.value === "yearmonth") ? (openBlock(), createBlock(_sfc_main$4, {
|
||
|
|
key: 2,
|
||
|
|
modelValue: currentYear.value,
|
||
|
|
"onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => currentYear.value = $event)
|
||
|
|
}, null, 8, ["modelValue"])) : createCommentVNode("", true),
|
||
|
|
!__props.range && showPanel.value === "month" ? (openBlock(), createBlock(_sfc_main$3, {
|
||
|
|
key: 3,
|
||
|
|
modelValue: currentMonth.value,
|
||
|
|
"onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => currentMonth.value = $event)
|
||
|
|
}, null, 8, ["modelValue"])) : createCommentVNode("", true),
|
||
|
|
__props.range && (showPanel.value === "date" || showPanel.value === "datetime") ? (openBlock(), createBlock(_sfc_main$2, {
|
||
|
|
key: 4,
|
||
|
|
startTime: rangeValue.first,
|
||
|
|
"onUpdate:startTime": _cache[15] || (_cache[15] = ($event) => rangeValue.first = $event),
|
||
|
|
endTime: rangeValue.last,
|
||
|
|
"onUpdate:endTime": _cache[16] || (_cache[16] = ($event) => rangeValue.last = $event)
|
||
|
|
}, null, 8, ["startTime", "endTime"])) : createCommentVNode("", true),
|
||
|
|
__props.range && showPanel.value === "yearmonth" ? (openBlock(), createBlock(_sfc_main$1, {
|
||
|
|
key: 5,
|
||
|
|
startTime: rangeValue.first,
|
||
|
|
"onUpdate:startTime": _cache[17] || (_cache[17] = ($event) => rangeValue.first = $event),
|
||
|
|
endTime: rangeValue.last,
|
||
|
|
"onUpdate:endTime": _cache[18] || (_cache[18] = ($event) => rangeValue.last = $event)
|
||
|
|
}, null, 8, ["startTime", "endTime"])) : createCommentVNode("", true)
|
||
|
|
]),
|
||
|
|
default: withCtx(() => [
|
||
|
|
!__props.range ? (openBlock(), createBlock(_sfc_main$a, {
|
||
|
|
key: 0,
|
||
|
|
name: __props.name,
|
||
|
|
readonly: __props.readonly,
|
||
|
|
placeholder: unref(startPlaceholder),
|
||
|
|
"prefix-icon": __props.prefixIcon,
|
||
|
|
"suffix-icon": __props.suffixIcon,
|
||
|
|
disabled: __props.disabled,
|
||
|
|
modelValue: unref(dateValue),
|
||
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(dateValue) ? dateValue.value = $event : null),
|
||
|
|
onChange,
|
||
|
|
onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur")),
|
||
|
|
onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("focus")),
|
||
|
|
"allow-clear": !__props.disabled && __props.allowClear,
|
||
|
|
size: __props.size,
|
||
|
|
onClear: _cache[3] || (_cache[3] = ($event) => {
|
||
|
|
dateValue.value = "";
|
||
|
|
onChange();
|
||
|
|
})
|
||
|
|
}, null, 8, ["name", "readonly", "placeholder", "prefix-icon", "suffix-icon", "disabled", "modelValue", "allow-clear", "size"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
|
||
|
|
createVNode(_sfc_main$a, {
|
||
|
|
readonly: __props.readonly,
|
||
|
|
name: __props.name,
|
||
|
|
modelValue: unref(dateValue)[0],
|
||
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(dateValue)[0] = $event),
|
||
|
|
placeholder: unref(startPlaceholder),
|
||
|
|
disabled: __props.disabled,
|
||
|
|
onChange,
|
||
|
|
onBlur: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("blur")),
|
||
|
|
onFocus: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("focus")),
|
||
|
|
class: "start-input",
|
||
|
|
size: __props.size
|
||
|
|
}, null, 8, ["readonly", "name", "modelValue", "placeholder", "disabled", "size"]),
|
||
|
|
createElementVNode("span", _hoisted_3, toDisplayString(__props.rangeSeparator), 1),
|
||
|
|
createVNode(_sfc_main$a, {
|
||
|
|
readonly: __props.readonly,
|
||
|
|
name: __props.name,
|
||
|
|
"allow-clear": __props.disabled && __props.allowClear,
|
||
|
|
placeholder: unref(endPlaceholder),
|
||
|
|
modelValue: unref(dateValue)[1],
|
||
|
|
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => unref(dateValue)[1] = $event),
|
||
|
|
disabled: __props.disabled,
|
||
|
|
onChange,
|
||
|
|
onBlur: _cache[8] || (_cache[8] = ($event) => _ctx.$emit("blur")),
|
||
|
|
onFocus: _cache[9] || (_cache[9] = ($event) => _ctx.$emit("focus")),
|
||
|
|
class: "end-input",
|
||
|
|
size: __props.size,
|
||
|
|
onClear: _cache[10] || (_cache[10] = ($event) => {
|
||
|
|
dateValue.value = [];
|
||
|
|
onChange();
|
||
|
|
})
|
||
|
|
}, null, 8, ["readonly", "name", "allow-clear", "placeholder", "modelValue", "disabled", "size"])
|
||
|
|
]))
|
||
|
|
]),
|
||
|
|
_: 1
|
||
|
|
}, 8, ["disabled", "contentClass", "contentStyle"])
|
||
|
|
], 10, _hoisted_1);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const component = withInstall(_sfc_main);
|
||
|
|
export { component as c, i18n as i, useI18n as u };
|