@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
218 lines (217 loc) • 8.6 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, toRef, computed, ref, openBlock, createElementBlock, Fragment, createElementVNode, toDisplayString, createVNode, withCtx, normalizeClass, withDirectives, vShow } from "vue";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { I as IcsPopup } from "../index-kY3YH8kV.js";
import IcsDatePicker from "../datepicker/DatePicker.js";
import { w as withInstall } from "../with-install-DWwOiZS3.js";
const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "nut-picker__title" }, null, -1);
const _hoisted_2 = { class: "nut-time-select-wrap" };
const _hoisted_3 = { class: "nut-time-select" };
const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", { class: "label" }, "开始时间", -1);
const _hoisted_5 = { class: "nut-time-select" };
const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { class: "label" }, "结束时间", -1);
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsDateRange"
}), {
__name: "index",
props: {
modelValue: {
type: [String, Array],
default: () => [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()]
// 使用函数返回数组
},
type: {
type: String,
// datetime date time year-month month-day datehour hour-minute
default: "datetime"
},
minDate: {
type: Date,
default: () => new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1)
},
maxDate: {
type: Date,
default: () => new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11, 31)
},
rangeSeparator: {
type: String,
default: "-"
},
disabled: {
type: Boolean,
default: false
},
suffix: {
type: Boolean,
default: true
}
},
emits: ["update:modelValue", "cancel", "confirm", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const disabled = useFormDisabled(toRef(props, "disabled"));
const defaultTime = /* @__PURE__ */ new Date();
const emits = __emit;
const rangeSeparator = computed(() => {
return props.rangeSeparator;
});
const selectVal = computed({
get() {
return props.modelValue && props.modelValue.length > 0 ? [props.modelValue[0] || defaultTime, props.modelValue[1] || defaultTime] : [defaultTime, defaultTime];
},
set(value) {
emits("update:modelValue", value);
}
});
const startTime = ref(/* @__PURE__ */ new Date());
const endTime = ref(/* @__PURE__ */ new Date());
const type = ref(props.type);
const show = ref(false);
const currentIndex = ref(0);
const showDate = computed(() => {
const start = formatDate(formatDate(new Date(selectVal.value[0]), "datetime"));
const end = formatDate(formatDate(new Date(selectVal.value[1]), "datetime"));
return start + rangeSeparator.value + end;
});
const selectTime = (index) => {
currentIndex.value = index;
};
function formatDate(date, type2) {
date = date ? typeof date === "string" ? new Date(date) : date : /* @__PURE__ */ new Date();
type2 = type2 || props.type || "datetime";
const padZero = (num) => num < 10 ? "0" + num : num;
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hours = padZero(date.getHours());
const minutes = padZero(date.getMinutes());
const seconds = padZero(date.getSeconds());
const formatMap = {
datetime: `${year}-${month}-${day} ${hours}:${minutes}`,
date: `${year}-${month}-${day}`,
time: `${hours}:${minutes}:${seconds}`,
"year-month": `${year}-${month}`,
"month-day": `${month}-${day}`,
datehour: `${year}-${month}-${day} ${hours}`,
"hour-minute": `${hours}:${minutes}`,
"month-minute": `${month}-${day} ${hours}:${minutes}`
};
return formatMap[type2] || "";
}
const cancel = () => {
emits("cancel");
show.value = false;
};
const confirm = () => {
emits("update:modelValue", [startTime.value, endTime.value]);
emits("confirm", [startTime.value, endTime.value]);
show.value = false;
};
const change = ({
columnIndex,
selectedValue,
selectedOptions
}) => {
emits("change", columnIndex, selectedValue, selectedOptions);
};
const onPicker = () => {
if (disabled.value)
return;
show.value = true;
startTime.value = selectVal.value[0];
endTime.value = selectVal.value[1];
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", {
class: "ics-date-range",
onClick: onPicker
}, toDisplayString(showDate.value), 1),
createVNode(IcsPopup, {
visible: show.value,
"onUpdate:visible": _cache[4] || (_cache[4] = ($event) => show.value = $event),
position: "bottom",
"pop-class": "nut-rangedatetime-popup"
}, {
default: withCtx(() => [
createElementVNode("div", { class: "nut-picker__bar" }, [
createElementVNode("div", {
class: "nut-picker__left",
onClick: cancel
}, "取消"),
_hoisted_1,
createElementVNode("div", {
class: "nut-picker__right",
onClick: confirm
}, "确认")
]),
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
_hoisted_4,
createElementVNode("div", {
class: normalizeClass(["time", { "nut-time-select-checked": currentIndex.value === 0 }]),
onClick: _cache[0] || (_cache[0] = ($event) => selectTime(0))
}, toDisplayString(formatDate(startTime.value, type.value)), 3)
]),
createElementVNode("div", _hoisted_5, [
_hoisted_6,
createElementVNode("div", {
class: normalizeClass(["time", { "nut-time-select-checked": currentIndex.value === 1 }]),
onClick: _cache[1] || (_cache[1] = ($event) => selectTime(1))
}, toDisplayString(formatDate(endTime.value, type.value)), 3)
])
]),
withDirectives(createVNode(IcsDatePicker, {
modelValue: startTime.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => startTime.value = $event),
type: type.value,
"min-date": __props.minDate,
"max-date": __props.maxDate,
"three-dimensional": false,
"show-toolbar": false,
onChange: change
}, null, 8, ["modelValue", "type", "min-date", "max-date"]), [
[vShow, currentIndex.value === 0]
]),
withDirectives(createVNode(IcsDatePicker, {
modelValue: endTime.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => endTime.value = $event),
type: type.value,
"min-date": __props.minDate,
"max-date": __props.maxDate,
"three-dimensional": false,
"show-toolbar": false,
onChange: change
}, null, 8, ["modelValue", "type", "min-date", "max-date"]), [
[vShow, currentIndex.value === 1]
])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as DateRange,
_sfc_main as default
};