feat: element plus 日期范围组件限制日期选择只能一个月内

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>

src/views/demo/jsonp.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>111</div>
+    <div>测试通过jsonp加载数据</div>
 </template>
 
 <script setup>