@fecp/mobile
Version:
181 lines (180 loc) • 7.58 kB
JavaScript
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
import { MobileField } from "../field/index.mjs";
import hooks from "../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.mjs";
import { Calendar } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/calendar/index.mjs";
import { Icon } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.mjs";
const _sfc_main = {
__name: "FieldCalendarPicker",
props: {
title: {
type: String,
default: "日期选择"
},
calendarType: {
type: String,
default: "single"
},
textFormat: {
type: String,
default: "YYYY-MM-DD"
},
valueFormat: {
type: String,
default: "YYYYMMDD"
},
modelValue: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
"is-link": false
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const fieldTextValue = ref("");
const showCalendar = ref(false);
const emit = __emit;
const defaultDate = computed({
get: () => {
if (!props.modelValue) {
return null;
}
if (props.calendarType == "single") {
try {
return hooks(props.modelValue, props.valueFormat).toDate();
} catch (error) {
return /* @__PURE__ */ new Date();
}
} else if (props.calendarType == "multiple") {
try {
return props.modelValue.map(
(value) => hooks(value, props.valueFormat).toDate()
);
} catch (error) {
return [/* @__PURE__ */ new Date()];
}
} else if (props.calendarType == "range") {
try {
return props.modelValue.map(
(value) => hooks(value, props.valueFormat).toDate()
);
} catch (error) {
return [];
}
}
},
set: (val) => {
emit("update:modelValue", val);
}
});
watch(
() => props.modelValue,
(value) => {
if (!value) {
fieldTextValue.value = "";
return;
}
if (props.calendarType == "single") {
fieldTextValue.value = hooks(value, props.valueFormat).format(
props.textFormat
);
} else if (props.calendarType == "multiple") {
if (Array.isArray(value)) {
fieldTextValue.value = `选择了 ${value.length} 个日期`;
}
} else if (props.calendarType == "range") {
if (Array.isArray(value)) {
const [start, end] = value;
fieldTextValue.value = `${hooks(start, props.valueFormat).format(
props.textFormat
)} 至 ${hooks(end, props.valueFormat).format(props.textFormat)}`;
}
}
},
{ immediate: true }
);
const onConfirm = (values) => {
if (props.calendarType == "single") {
defaultDate.value = hooks(values).format(props.valueFormat);
} else if (props.calendarType == "multiple") {
defaultDate.value = values.map(
(value) => hooks(value).format(props.valueFormat)
);
} else if (props.calendarType == "range") {
defaultDate.value = values.map(
(value) => hooks(value).format(props.valueFormat)
);
}
showCalendar.value = false;
};
return (_ctx, _cache) => {
const _component_van_icon = Icon;
const _component_van_calendar = Calendar;
return openBlock(), createBlock(unref(MobileField), mergeProps(_ctx.$attrs, {
modelValue: unref(fieldTextValue),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
isLink: __props.readonly ? false : true,
readonly: "",
disabled: __props.disabled,
onOpenPicker: _cache[3] || (_cache[3] = () => {
if (!__props.readonly) {
showCalendar.value = true;
}
})
}), createSlots({
default: withCtx(() => [
createVNode(_component_van_calendar, mergeProps(_ctx.$attrs, {
show: unref(showCalendar),
"onUpdate:show": _cache[1] || (_cache[1] = ($event) => isRef(showCalendar) ? showCalendar.value = $event : null),
"default-date": unref(defaultDate),
title: __props.title,
type: __props.calendarType,
readonly: false,
"switch-mode": "year-month",
onConfirm
}), null, 16, ["show", "default-date", "title", "type"])
]),
_: 2
}, [
!__props.readonly && !__props.disabled && unref(fieldTextValue) ? {
name: "right-icon",
fn: withCtx(() => [
createVNode(_component_van_icon, {
name: "clear",
class: "custom-close-icon",
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => defaultDate.value = null, ["stop"]))
})
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "isLink", "disabled"]);
};
}
};
export {
_sfc_main as default
};