fix : 修复日期选择动态5天范围

src/components/chooseDates/index.vue

@@ -11,41 +11,50 @@
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         :disabled-date="disabledDate"
+        @calendar-change="calendarChange"
     />
   </div>
 </template>
 
 
 <script setup>
-import {ElMessage} from "element-plus";
-
+const selected = ref(false);
+const selectDate = ref();
 const selectButton = ref();
 const emit = defineEmits(["update:modelValue", "select"]);
-const disabledDate = (time) => {
-  // return time.getTime() > Date.now()//不能选择之后的数据
-  let curDate = (new Date()).toString() // 当前时间戳转为字符串
-  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
-  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
-  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
-  return time.getTime() > Date.now() || time.getTime() < oneYear;
+const calendarChange = (time) => {
+  let startTime
+  if (time[0] != null && time[1] == null) {
+    startTime = time[0].getTime();
+    selectDate.value = startTime;
+    selected.value = true
+  }
 }
+
+const disabledDate = (date) => {
+  if (!selected.value) {
+    let currDate = new Date();
+    currDate.setFullYear(currDate.getFullYear() - 1);
+    return date.getTime() > Date.now() || date.getTime() < currDate.getTime();
+  } else {
+    let currTime = selectDate.value;
+    let startTime = currTime - (24 * 4 * 60 * 60 * 1000);
+    let endTime = currTime + (24 * 4 * 60 * 60 * 1000);
+    let nowTime = Date.now();
+    endTime = endTime > nowTime ? nowTime : endTime;
+    let time = date.getTime();
+    return !(time >= startTime && time <= endTime);
+  }
+}
+
 const dataSelect = (val) => {
   if (val !== null) {
-    const startDate = new Date(val[0]).getTime();
-    const endDate = new Date(val[1]).getTime();
-    if (endDate - startDate > 4 * 24 * 60 * 60 * 1000) {
-      ElMessage.warning('所选日期范围不能大于5天!')
-      clearData()
-      // emit("select", false);//clear重新加载
-    } else {
-      emit("select", val);
-    }
+    selected.value = false
+    emit("select", val);
   } else {
     emit("select", false);
   }
   emit("update:modelValue", val);
-
-  // }
 };
 const clearData = () => {
   selectButton.value = ''
@@ -112,6 +121,12 @@ defineExpose({
           }
         }
 
+        .today.disabled {
+          .el-date-table-cell__text {
+            font-size: 19px;
+          }
+        }
+
         .available {
           color: #FFFFFF;
           font-weight: bold;