Vue el-date-picker dynamic limit time range case detailed explanation

//Case 1 Original Copyright Statement: This article is an original article by weixin_40998880 and complies with the CC 4.0 BY-SA Copyright Agreement. Please attach the original source link and this statement when reprinting.
//Link to this article: https://blog.csdn.net/weixin_40998880/article/details/106272897
 
//html
<el-date-picker
   v-model="time"
   type="datetimerange"
   @change="datePickerChange"
   :picker-options="pickerOptions"
   range-separator="-"
   start-placeholder="start date"
   end-placeholder="end date"
   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: {
      // When clicked, the start time is selected, which is minDate
      onPick: ({ maxDate, minDate }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // Remove restrictions this.selectData = ''
         }
      },
      disabledDate: (time) => {
          // Whether to limit the judgment condition if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            // Here are the restriction conditions. Dates greater than or less than this month are disabled (try not to use this method, because this month of other years can also be selected. For specific restriction dates, refer to situation 2)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
     }
  }
},
methods:{
  // Check if it is empty isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}
 

//Situation 2
//html
    <el-col :span="8">
                <el-form-item prop="beginTime" label="Appointment start time:">
                  <el-date-picker
                    v-model="editForm.beginTime"
                    type="datetime"
                    placeholder="Select a start time"
                    :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="Appointment end time:">
                  <el-date-picker
                    v-model="editForm.endTime"
                    type="datetime"
                    placeholder="Select a start time"
                    :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: [
        {
          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
            );
          }
        },
        {
          //Restrict the end time to one week after the start time disabledDate: time => {
            // Whether to limit the judgment condition const date = new Date(this.editForm.beginTime);
            if (!this.isNull(date)) {
              const day = 7 * 24 * 3600 * 1000;
              const dateRegion = date.getTime() + day;
              return (
                //Disable dates that are less than the start time and one week after the start time new Date(time).getTime() > dateRegion ||
                new Date(time).getTime() < date.getTime()
              );
            } else {
              return false;
            }
          }
        }
      ],
  }
},
methods:{
  // Check if it is empty isNull(value) {
    if (value) {
      return false
    }
    return true
  },
  //Get the current time and add the default value when selected getNowTime() {
      let d = new Date();
      let year, month, day, hour, minute;
      //Ten minutes after the current time d.setTime(d.getTime() + 10 * 60 * 1000);
      [year, month, day, hour, minute] = [
        d.getFullYear(),
        d.getMonth(),
        d.getDate(),
        d.getHours(),
        d.getMinutes()
      ];
      let hour2 = hour + 1;
      //The default value when the start time is selected is ten minutes after the current time //The default value when the end time is selected is one hour and ten minutes after the current time this.defaultTime = [
        hour + ":" + minute + ":00",
        hour2 + ":" + minute + ":00"
      ];
    },
}