@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
250 lines (249 loc) • 9.87 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, watch, openBlock, createElementBlock, Fragment, createElementVNode, createBlock, unref, toDisplayString, createVNode, withCtx, normalizeClass } from "vue";
import "../input/Input.js";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { I as IcsPopup } from "../index-kY3YH8kV.js";
import IcsDatePicker from "../datepicker/DatePicker.js";
import { _ as _sfc_main$1 } from "../input.vue_vue_type_script_setup_true_lang-CUVjcKoZ.js";
import { w as withInstall } from "../with-install-DWwOiZS3.js";
const _hoisted_1 = { class: "ics-input-picker" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "nut-picker__title" }, null, -1);
const _hoisted_3 = { class: "nut-time-select-wrap" };
const _hoisted_4 = { class: "nut-time-select" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "label" }, "开始时间", -1);
const _hoisted_6 = { class: "nut-time-select" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "label" }, "结束时间", -1);
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsRangeDateTime"
}), {
__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(formatDate(new Date(selectVal.value[0])));
const endTime = ref(formatDate(new Date(selectVal.value[1])));
const hoursDifference = computed(() => {
const start = new Date(startTime.value || props.modelValue[0] || defaultTime);
const end = new Date(endTime.value || props.modelValue[1] || defaultTime);
const diffInMs = end.getTime() - start.getTime();
const diffInHours = Math.floor(diffInMs / (1e3 * 60 * 60));
const diffInMinutes = Math.floor(diffInMs % (1e3 * 60 * 60) / (1e3 * 60));
let t = "";
if (diffInHours) {
t += `${diffInHours}小时`;
}
if (diffInMinutes) {
t += `${diffInMinutes}分钟`;
}
return t;
});
watch(
() => props.modelValue,
() => {
date.value = selectVal.value[0];
startTime.value = formatDate(new Date(selectVal.value[0]));
endTime.value = formatDate(new Date(selectVal.value[1]));
}
);
const type = ref(props.type);
const show = ref(false);
const date = ref(selectVal.value[0]);
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;
date.value = index === 0 ? startTime.value : endTime.value;
};
function formatDate(date2, type2) {
date2 = date2 ? typeof date2 === "string" ? new Date(date2) : date2 : /* @__PURE__ */ new Date();
type2 = type2 || props.type || "datetime";
const padZero = (num) => num < 10 ? "0" + num : num;
const year = date2.getFullYear();
const month = padZero(date2.getMonth() + 1);
const day = padZero(date2.getDate());
const hours = padZero(date2.getHours());
const minutes = padZero(date2.getMinutes());
const seconds = padZero(date2.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, hoursDifference.value]);
show.value = false;
};
const change = ({
columnIndex,
selectedValue,
selectedOptions
}) => {
const date2 = `${selectedValue[0]}-${selectedValue[1]}-${selectedValue[2]} ${selectedValue[3]}:${selectedValue[4]}`;
if (currentIndex.value === 0) {
startTime.value = date2;
}
if (currentIndex.value === 1) {
endTime.value = date2;
}
emits("change", columnIndex, selectedValue, selectedOptions);
};
const onPicker = () => {
if (disabled.value)
return;
show.value = true;
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", _hoisted_1, [
__props.suffix ? (openBlock(), createBlock(unref(_sfc_main$1), {
key: 0,
modelValue: showDate.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showDate.value = $event),
border: false,
suffix: hoursDifference.value,
placeholder: "请选择",
readonly: "",
disabled: unref(disabled),
onClick: onPicker
}, null, 8, ["modelValue", "suffix", "disabled"])) : (openBlock(), createElementBlock("div", {
key: 1,
class: "text",
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_2,
createElementVNode("div", {
class: "nut-picker__right",
onClick: confirm
}, "确认")
]),
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
_hoisted_5,
createElementVNode("div", {
class: normalizeClass(["time", { "nut-time-select-checked": currentIndex.value === 0 }]),
onClick: _cache[1] || (_cache[1] = ($event) => selectTime(0))
}, toDisplayString(startTime.value), 3)
]),
createElementVNode("div", _hoisted_6, [
_hoisted_7,
createElementVNode("div", {
class: normalizeClass(["time", { "nut-time-select-checked": currentIndex.value === 1 }]),
onClick: _cache[2] || (_cache[2] = ($event) => selectTime(1))
}, toDisplayString(endTime.value), 3)
])
]),
createVNode(IcsDatePicker, {
modelValue: date.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => date.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"])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as RangeDateTime,
_sfc_main as default
};