1. 程式人生 > 其它 >ElementUI 多個時間選擇器判斷時間不能超過七天

ElementUI 多個時間選擇器判斷時間不能超過七天

時間選擇器

<div class="block">
          <el-date-picker
            v-model="beanData"
            type="daterange"
            format="yyyy/MM/dd"
            @change="change"
            range-separator="至"
            start-placeholder="開始日期"
            end-placeholder="結束日期"
           >
          </el-date-picker>

data()

   change(data) {
        this.choiceDate=''
        let oDate1 = data[0]
        let oDate2 = data[1]
        let nowDate = new Date();
        if(oDate1 && oDate2) {
          if (oDate1.getTime() > oDate2.getTime()-1) {//開始時間不能大於等於結束時間
            this.$message({
              message: '開始時間不能大於等於結束時間',
              type: 'warning'
            })
            return;
          }

          if (oDate1.getTime() >= nowDate.getTime()) {//開始時間不能大於等於當前時間前一天
            this.$message({
              message: '開始時間不能大於等於當前時間前一天',
              type: 'warning'
            })
            return;
          }

          if (oDate2.getTime() > nowDate.getTime()-1000*60*60*24) {//結束時間必須小於當前時間前一天
            this.$message({
              message: '結束時間必須小於當前時間前一天',
              type: 'warning'
            })
            return;
          }

          if (oDate1.getTime() <= oDate2.getTime()-7*24*3600*1000) {//結束時間只能在開始時間後六天
            this.$message({
              message: '結束時間只能在開始時間後六天',
              type: 'warning'
            })
            return this.beanData[1]=new Date(oDate1.getTime()+6*24*3600*1000);
          }

        }

      },

這裡判斷的是開始時間不能大於結束時間 驗證大於一秒

oDate1.getTime() > oDate2.getTime()-1

這裡判斷的是開始時間不能大於結束時間 驗證大於一天

oDate2.getTime() > nowDate.getTime()-1000*60*60*24

這裡判斷的是開始時間不能大於結束時間 驗證大於7天就給結束時間賦值,因為這裡判讀的是getTime,賦值的時候要轉換成Date型別

    if (oDate1.getTime() <= oDate2.getTime()-7*24*3600*1000) {//結束時間不能大於當前時間
            this.$message({
              message: '結束時間只能在開始時間後六天',
              type: 'warning'
            })
            return this.beanData[1]=new Date(oDate1.getTime()+6*24*3600*1000);
          }

效果圖 具體驗證看個人需求
在這裡插入圖片描述
在這裡插入圖片描述