vue el-date-picker动态限制时间范围案例详解

//情况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="datePickerChange"   :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//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: [        {          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() + 10 * 60 * 1000);      [year, month, day, hour, minute] = [        d.getFullYear(),        d.getMonth(),        d.getDate(),        d.getHours(),        d.getMinutes()      ];      let hour2 = hour + 1;      //选中开始时间时的默认值为当前时间的十分钟后      //选中结束时间时的默认值为当前时间的一个小时十分钟后      this.defaultTime = [        hour + ":" + minute + ":00",        hour2 + ":" + minute + ":00"      ];    },}