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

src/assets/styles/index.scss

@@ -282,7 +282,7 @@ body,
   .btn {
     width: 100%;
     margin-top: 14px;
-    font-size: 26px;
+    font-size: 30px;
     color: #9fc3cd;
 
     .el-carousel__item {
@@ -293,8 +293,8 @@ body,
       display: flex;
       justify-content: center;
       padding-top: 5px;
-      width: 158px;
+      width: 200px;
-      height: 50px;
+      height:60px;
       background-image: url("../images/topAndDown/sp_icon_sdqhx.png");
     }
 
@@ -302,7 +302,7 @@ body,
       margin-top: -5px;
       color: #ffffff;
       padding-top: 7px;
-      width: 201px;
+      width: 225px;
       height: 62px;
       background-image: url("../images/topAndDown/sp_icon_sdqhd.png");
     }

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) => {
+const calendarChange = (time) => {
-  // return time.getTime() > Date.now()//不能选择之后的数据
+  let startTime
-  let curDate = (new Date()).toString() // 当前时间戳转为字符串
+  if (time[0] != null && time[1] == null) {
-  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
+    startTime = time[0].getTime();
-  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
+    selectDate.value = startTime;
-  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
+    selected.value = true
-  return time.getTime() > Date.now() || time.getTime() < oneYear;
+  }
 }
+
+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();
+    selected.value = false
-    const endDate = new Date(val[1]).getTime();
+    emit("select", val);
-    if (endDate - startDate > 4 * 24 * 60 * 60 * 1000) {
-      ElMessage.warning('所选日期范围不能大于5天!')
-      clearData()
-      // emit("select", false);//clear重新加载
-    } else {
-      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;

src/views/site/index.vue

@@ -289,6 +289,10 @@ const handleAdd = () => {
   restFrom()
   title.value = '新增站点'
   isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
 const handleSubmit = (instance) => {
   if (!instance) return