From b86ee544f291badd6025d08f9823d073b40e83ef Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Mon, 16 Oct 2023 23:26:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=B0=81=E8=A3=85?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E6=97=B6=E9=97=B4=E6=AE=B5=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 1544db150682351312531f3627a35046c0a82564
---
 src/components/DateRange/index.vue | 69 ++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/DateRange/index.vue

diff --git a/src/components/DateRange/index.vue b/src/components/DateRange/index.vue
new file mode 100644
index 00000000..e0b62692
--- /dev/null
+++ b/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>