分為兩種情況

1.開始時間和結束時間同一個框（限制只能本月）

2.開始時間和結束時間分開兩個框（限制開始時間不能早於當前時間且結束時間不超過開始時間一星期）

 情況1

//情況1 原創版權宣告：本文為weixin_40998880原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連結和本宣告。
//本文連結：https://blog.csdn.net/weixin_40998880/article/details/106272897
 
//html
<el-date-picker
   v-model="time"
   type="datetimerange"
   @change="datePick
 
erChange"
   :picker-options="pickerOptions"
   range-separator="-"
   start-placeholder="開始日期"
   end-placeholder="結束日期"
   align="right"
   style="width:100%;"
   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
   :default-time="['00:00:00','23:59:59']">
</el-date-picker>
 

 
//script
 
data(){
  return {
     selectData: '',pickerOptions: {
      // 點選時，選擇的是開始時間，也就是minDate
      onPick: ({ maxDate,minDate }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // 解除限制
           this.selectData = ''
         }
      },disabledDate: (time) => {
          // 是否限制的判斷條件
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            // 這裡就是限制的條件，這裡為大於或者小於本月的日期被禁用(儘量不使用這種方法，因為其他年份的本月也能進行選擇，具體限制日期參考情況2)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
     }
  }
},methods:{
  // 檢查是否為空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}
 

情況2

//情況2
//html
    <el-col :span="8">
                <el-form-item prop="beginTime" label="預約開始時間：">
                  <el-date-picker
                    v-model="editForm.beginTime"
                    客棧type="datetime"
                    placeholder="選擇開始時間"
                    :picker-options="pickerOptions[0]"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="defaultTime[0]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item prop="endTime" label="預約結束時間：">
                  <el-date-picker
                    v-model="editForm.endTime"
                    type="datetime"
                    placeholder="選擇開始時間"
                    :picker-options="pickerOptions[1]"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="defaultTime[1]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              
              

 //script
    data(){
  return {
     selectData: '',defaultTime: [],pickerOptions: [
        {
    OQUTinzm      disabledDate: time => {
            const curDate = new Date().getTime();
            const day = 14 * 24 * 3600 * 1000;
            const dateRegion = curDate + day;
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > dateRegion
            );
          }
        },{
          //限制結束時間為開始時間的一週後
          disabledDate: time => {
            // 是否限制的判斷條件
            const date = new Date(this.editForm.beginTime);
            if (!this.isNull(date)) {
              const day = 7 * 24 * 3600 * 1000;
              const dateRegion = date.getTime() + day;
              return (
                //禁用小於開始時間和大與開始時間一週後的日期
                new Date(time).getTime() > dateRegion ||
                new Date(time).getTime() < date.getTime()
              );
            } else {
              return false;
            }
          }
        }
      ],}
},methods:{
  // 檢查是否為空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  },//獲得當前時間並新增選中時的預設值
  getNowTime() {
      let d = new Date();
      let year,month,day,hour,minute;
      //當前時間的十分鐘後
      d.setTime(d.getTime() + 1OQUTinzm0 * 60 * 1000);
      [year,minute] = [
        d.getFullYear(),d.getMonth(),d.getDate(),d.getHours(),d.getMinutes()
      ];
      let hour2 = hour + 1;
      //選中開始時間時的預設值為當前時間的十分鐘後
      //選中結束時間時的預設值為當前時間的一個小時十分鐘後
      this.defaultTime = [
        hour + ":" + minute + ":00",hour2 + ":" + minute + ":00"
      ];
    },}

到此這篇關於 el-date-picker動態限制時間範圍案例詳解的文章就介紹到這了,更多相關vue el-date-picker動態限制時間範圍內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！