theluyuan/layui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
fc825565d7
layui-vue/es/datePicker/index2.js

1867 lines
100 KiB
JavaScript
Raw Normal View History

init
2022-11-14 03:59:26 +00:00
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";
分页
2022-11-15 06:45:07 +00:00
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
init
2022-11-14 03:59:26 +00:00
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),
分页
2022-11-15 06:45:07 +00:00
"layui-disabled": item.type !== "current" && unref(datePicker).range,
"layui-laydate-current": __props.modelValue === -1 && item.value === unref(dayjs)().startOf("day").valueOf()
init
2022-11-14 03:59:26 +00:00
}),
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,
分页
2022-11-15 06:45:07 +00:00
class: normalizeClass({
"layui-this": Year.value === item,
"layui-laydate-current": !Year.value && item === unref(dayjs)().year()
}),
init
2022-11-14 03:59:26 +00:00
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,
分页
2022-11-15 06:45:07 +00:00
class: normalizeClass({
"layui-this": unref(MONTH_NAME).indexOf(item) === Month.value,
"layui-laydate-current": Month.value === "" && parseInt(item) - 1 === unref(dayjs)().month()
}),
init
2022-11-14 03:59:26 +00:00
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,
分页
2022-11-15 06:45:07 +00:00
"laydate-range-hover": unref(ifHasRangeHoverClass)(unref(getUnix)(item, "left")),
"layui-laydate-current": (startTime.unix === -1 || endTime.unix === -1) && unref(getUnix)(item, "left") === unref(dayjs)().startOf("month").valueOf()
init
2022-11-14 03:59:26 +00:00
}),
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,
分页
2022-11-15 06:45:07 +00:00
"laydate-range-hover": unref(ifHasRangeHoverClass)(unref(getUnix)(item, "right")),
"layui-laydate-current": (startTime.unix === -1 || endTime.unix === -1) && unref(getUnix)(item, "right") === unref(dayjs)().startOf("month").valueOf()
init
2022-11-14 03:59:26 +00:00
}),
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 };
Reference in New Issue Copy Permalink