@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
189 lines (188 loc) • 6.5 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, ref, computed, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx } 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 _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsCellTimePicker"
}), {
__name: "index",
props: {
modelValue: {
type: String,
default: ""
},
title: {
type: String,
default: "时间"
},
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)
},
disabled: {
type: Boolean,
default: false
},
format: {
type: String,
default: "yyyy-MM-dd HH:mm"
},
valueFormat: {
type: String,
default: "yyyy-MM-dd HH:mm"
}
},
emits: ["update:modelValue", "cancel", "confirm", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const disabled = useFormDisabled(toRef(props, "disabled"));
const emits = __emit;
const type = ref(props.type);
const show = ref(false);
const date = ref(formatDate(/* @__PURE__ */ new Date(), props.valueFormat));
const showDate = computed(() => {
const date2 = selectVal.value ? new Date(selectVal.value) : /* @__PURE__ */ new Date();
return selectVal.value ? formatDate(date2, props.format) : "";
});
const selectVal = computed({
get() {
return props.modelValue;
},
set(value) {
emits("update:modelValue", value);
}
});
const formatValue = (selectedValue, type2) => {
type2 = type2 || props.type || "datetime";
const padZero = (value) => value.padStart(2, "0");
const [year, month, day, hour, minute, second] = selectedValue.map(padZero);
const formatMap = {
datetime: `${year}-${month}-${day} ${hour}:${minute}`,
date: `${year}-${month}-${day}`,
time: `${hour}:${minute}:${second}`,
"year-month": `${year}-${month}`,
"month-day": `${month}-${day}`,
datehour: `${year}-${month}-${day} ${hour}`,
"hour-minute": `${hour}:${minute}`
};
return formatMap[type2] || "";
};
const cancel = ({
selectedValue,
selectedOptions
}) => {
emits("cancel", selectedValue, selectedOptions);
show.value = false;
};
const confirm = ({
selectedValue,
selectedOptions
}) => {
const datestr = formatValue(selectedValue);
selectVal.value = datestr;
emits("confirm", selectedValue, selectedOptions);
show.value = false;
};
const change = ({
columnIndex,
selectedValue,
selectedOptions
}) => {
emits("change", columnIndex, selectedValue, selectedOptions);
};
const onPicker = () => {
if (disabled.value)
return;
show.value = true;
selectVal.value && (date.value = selectVal.value);
};
function formatDate(date2, format) {
const padZero = (num) => String(num).padStart(2, "0");
const replacements = {
yyyy: date2.getFullYear(),
MM: padZero(date2.getMonth() + 1),
// 月份从0开始
dd: padZero(date2.getDate()),
HH: padZero(date2.getHours()),
mm: padZero(date2.getMinutes()),
ss: padZero(date2.getSeconds())
// 如果需要秒数
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => replacements[match]);
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", _hoisted_1, [
createVNode(unref(_sfc_main$1), {
modelValue: showDate.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showDate.value = $event),
border: false,
placeholder: "请选择",
readonly: "",
disabled: unref(disabled),
onClick: onPicker
}, null, 8, ["modelValue", "disabled"])
]),
createVNode(IcsPopup, {
visible: show.value,
"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => show.value = $event),
position: "bottom",
"pop-class": "nut-time-picker-popup"
}, {
default: withCtx(() => [
createVNode(IcsDatePicker, {
modelValue: date.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => date.value = $event),
type: type.value,
"min-date": __props.minDate,
"max-date": __props.maxDate,
"three-dimensional": false,
"is-show-chinese": true,
onConfirm: confirm,
onCancel: cancel,
onChange: change
}, null, 8, ["modelValue", "type", "min-date", "max-date"])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as CellTimePicker,
_sfc_main as default
};