feat: ✨ 封装日期时间段选择组件

Former-commit-id: 1544db150682351312531f3627a35046c0a82564

src/components/DateRange/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="startDate"
+      type="date"
+      placeholder="开始日期"
+      :picker-options="startPickerOptions"
+    />
+    <el-date-picker
+      v-model="endDate"
+      type="date"
+      placeholder="结束日期"
+      :picker-options="endPickerOptions"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+  format: {
+    type: String,
+    default: "yyyy-MM-dd",
+  },
+  valueFormat: {
+    type: String,
+    default: "yyyy-MM-dd",
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+let startDate = computed({
+  get: () => props.modelValue.startDate,
+  set: (val) =>
+    emit("update:modelValue", { ...props.modelValue, startDate: val }),
+});
+
+let endDate = computed({
+  get: () => props.modelValue.endDate,
+  set: (val) =>
+    emit("update:modelValue", { ...props.modelValue, endDate: val }),
+});
+
+watch(
+  [startDate, endDate],
+  () => {
+    if (startDate.value > endDate.value) {
+      // 在这里可以添加提示代码，提醒用户开始时间不能大于结束时间
+      console.log("开始时间不能大于结束时间");
+    }
+  },
+  { immediate: true }
+);
+
+let startPickerOptions = computed(() => ({
+  disabledDate: (time: any) => {
+    return endDate.value ? time.getTime() > endDate.value : false;
+  },
+}));
+
+let endPickerOptions = computed(() => ({
+  disabledDate: (time: any) => {
+    return startDate.value ? time.getTime() < startDate.value : false;
+  },
+}));
+</script>