@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
200 lines (199 loc) • 7.48 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, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, createElementVNode } from "vue";
import "../input/Input.js";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { I as IcsPopup } from "../index-kY3YH8kV.js";
import NutTabs from "../tabs/Tabs.js";
import NutTabPane from "../tabpane/TabPane.js";
import NutCalendar from "../calendar/Calendar.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 _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsCellDatePicker"
}), {
__name: "index",
props: {
modelValue: {
type: String,
default: ""
},
title: {
type: String,
default: "日期"
},
timeType: {
type: String,
// hour-minute time
default: "hour-minute"
},
startDate: {
type: String,
default: "2024-01-01"
},
endDate: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
}
},
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const disabled = useFormDisabled(toRef(props, "disabled"));
const getCurrentDate = () => {
const date = /* @__PURE__ */ new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
return {
date: `${year}-${month}-${day}`,
time: `${hours}:${minutes}`,
picker: [year, Number(month) - 1, Number(day)]
};
};
const selectVal = ref(props.modelValue);
const currentDate = getCurrentDate().date;
const currentTime = getCurrentDate().time;
const picker = getCurrentDate().picker;
const value = selectVal.value ? selectVal.value.split(" ") : [currentDate, currentTime];
const t = (value[1] || currentTime).split(":");
const callTime = new Date(picker[0], picker[1], picker[2], Number(t[0]), Number(t[1]), Number(t[2]) || 0);
const emits = __emit;
const timeType = ref(props.timeType);
const dateTitle = ref(value[0] || currentDate);
const timeTitle = ref(value[1] || currentTime);
const time = ref(callTime);
const tabs = ref("1");
const popupShow = ref(false);
const startDate = ref(props.startDate || "2024-01-01");
const endDate = ref(props.endDate || currentDate);
const confirm = () => {
selectVal.value = dateTitle.value + " " + timeTitle.value;
popupShow.value = false;
emits("update:modelValue", selectVal.value);
emits("change", selectVal.value);
};
const onPicker = () => {
if (disabled.value)
return;
tabs.value = "1";
const value2 = selectVal.value ? selectVal.value.split(" ") : [currentDate, currentTime];
dateTitle.value = value2[0] || currentDate;
timeTitle.value = value2[1] || currentTime;
popupShow.value = true;
};
const select = (param) => {
dateTitle.value = param[3];
tabs.value = "2";
};
const datePickerChange = ({ selectedValue }) => {
timeTitle.value = selectedValue.slice(0, 3).join(":");
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(unref(_sfc_main$1), {
modelValue: selectVal.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectVal.value = $event),
border: false,
placeholder: "请选择时间",
readonly: "",
disabled: unref(disabled),
onClick: onPicker
}, null, 8, ["modelValue", "disabled"]),
createVNode(IcsPopup, {
visible: popupShow.value,
"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => popupShow.value = $event),
position: "bottom",
"pop-class": "custom-popup"
}, {
default: withCtx(() => [
createElementVNode("div", {
class: "confirm",
onClick: confirm
}, "确定"),
createVNode(NutTabs, {
modelValue: tabs.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tabs.value = $event),
align: "left",
class: "custom-tabs"
}, {
default: withCtx(() => [
createVNode(NutTabPane, {
title: dateTitle.value,
"pane-key": "1"
}, {
default: withCtx(() => [
createVNode(NutCalendar, {
poppable: false,
"default-value": dateTitle.value,
type: "one",
"start-date": startDate.value,
"end-date": endDate.value,
"show-title": false,
"show-sub-title": false,
class: "custom-calendar",
onSelect: select
}, {
"footer-info": withCtx(() => []),
_: 1
}, 8, ["default-value", "start-date", "end-date"])
]),
_: 1
}, 8, ["title"]),
createVNode(NutTabPane, {
title: timeTitle.value,
"pane-key": "2"
}, {
default: withCtx(() => [
createVNode(IcsDatePicker, {
modelValue: time.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => time.value = $event),
type: timeType.value,
"three-dimensional": false,
"show-toolbar": false,
"is-show-chinese": true,
class: "custom-date-picker",
onChange: datePickerChange
}, null, 8, ["modelValue", "type"])
]),
_: 1
}, 8, ["title"])
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as CellDatePicker,
_sfc_main as default
};