From b084c6049a01e5fc2d298ec510dc8edcceb6ccba Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 23 May 2025 17:43:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20element=20plus=20=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4=E7=BB=84=E4=BB=B6=E9=99=90=E5=88=B6=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E9=80=89=E6=8B=A9=E5=8F=AA=E8=83=BD=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E6=9C=88=E5=86=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/dateRangeLimit.vue | 72 +++++++++++++++++++++++++++++++
 src/views/demo/jsonp.vue          |  2 +-
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demo/dateRangeLimit.vue

diff --git a/src/views/demo/dateRangeLimit.vue b/src/views/demo/dateRangeLimit.vue
new file mode 100644
index 0000000..5dfa839
--- /dev/null
+++ b/src/views/demo/dateRangeLimit.vue
@@ -0,0 +1,72 @@
+<template>
+    <el-card>
+        <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            :clearable="true"
+            :disabled-date="disabledDate"
+            @calendar-change="calendarChange"
+        />
+        <br />
+        <el-button
+            class="mt-5"
+            type="primary"
+            @click="console.log(form)"
+            >点击查看控制台打印日期数据</el-button
+        >
+    </el-card>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import dayjs from 'dayjs';
+
+const form = ref({
+    date: [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'month').format('YYYY-MM-DD')],
+    startDate: '',
+    endDate: '',
+});
+
+watch(
+    () => form.value.date,
+    (newVal) => {
+        if (newVal && newVal.length === 2) {
+            form.value.startDate = newVal[0];
+            form.value.endDate = newVal[1];
+        } else {
+            form.value.startDate = '';
+            form.value.endDate = '';
+        }
+    },
+    { immediate: true }
+);
+
+let currentStartDate = null;
+const disabledDate = (date) => {
+    if (currentStartDate) {
+        const minDate = dayjs(currentStartDate).subtract(1, 'month').valueOf();
+        const maxDate = dayjs(currentStartDate).add(1, 'month').valueOf();
+        return date.valueOf() < minDate || date.valueOf() > maxDate;
+        // 限制不能选择今天及以后
+        // return date.valueOf() < minDate || date.valueOf() > maxDate || date.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
+    } else {
+        // 如果没有选择日期，就要限制不能选择今天及以后
+        // return date.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
+    }
+};
+const calendarChange = (val) => {
+    const minDate = val[0];
+    const maxDate = val[1];
+    // 把选择的第一个日期赋值给一个变量
+    currentStartDate = minDate.valueOf();
+    // 如何你选择了两个日期了，就把那个变量置空
+    if (maxDate) {
+        currentStartDate = null;
+    }
+};
+</script>
diff --git a/src/views/demo/jsonp.vue b/src/views/demo/jsonp.vue
index 5857dd8..086cb23 100644
--- a/src/views/demo/jsonp.vue
+++ b/src/views/demo/jsonp.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>111</div>
+    <div>测试通过jsonp加载数据</div>
 </template>
 
 <script setup>