关于element-ui日期选择器disabledDate

关于element-ui日期选择器disabledDate
禁用时间区间

参考贴https://www.cnblogs.com/hrlin/p/8778630.html

原贴HTML部分

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.3/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="startDatePicker">
    </el-date-picker>
    <el-date-picker
      v-model="value3"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="endDatePicker">
    </el-date-picker>
  </div>
</template>
</div>

JS部分

var Main = {
    data() {
      return {
          value2: '',
        value3: '',
        startDatePicker:this.beginDate(),
        endDatePicker:this.processDate()
      };
    },
    methods: {
        beginDate(){
        let self = this
        return {
          disabledDate(time){
          return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
             }
           }
      },
      //提出结束时间必须大于提出开始时间
      processDate(){
        let self = this
        return {
          disabledDate(time){
            if(self.value2){
              return new Date(self.value2).getTime() > time.getTime() || time.getTime() > Date.now()
            }else{
              return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

修改后
如果开始时间不选，则结束时间只做1天的筛选
JS部分

beginDate() {
      let self = this;
      return {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //开始时间不选时，结束时间最大值小于等于当天
        },
      };
    },
    //结束时间必须大于开始时间
    processDate() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.value2) {
            return time.getTime() < new Date(self.value2).getTime() + 8.64e7;
          } else {
            return time.getTime() < Date.now(); //开始时间不选时，结束时间最小值当天+1
            // return time.getTime() < Date.now()|| time.getTime() > Date.now()+8.64e7; //开始时间不选时，结束时间最小值当天+1,只做1天的筛选
          }
        },
      };
    },

注：8.64e7为1天的时间 （10006060*24）

如果开始时间没有选择，则结束时间选择区间为单一的当前时间+1天

如果当前时间已选择，则，结束时间为，开始时间+1天之后的时间，都可选