两个时间选择器的关联限制

要求：

1. 开始时间和结束时间的时间差为2年

2. 不可选今天之后的时间点

 

html：

<div class="f-time-custom">自定义：
     <el-date-picker v-model="startTime" type="date" default-time="12:00:00" 
                     prefix-icon="el-icon-date" :clearable="false"
                    @change="checkTime('start')" value-format="yyyy/MM/dd" 
                    :picker-options="pickerOptions0">
     </el-date-picker>
     <div class="f-horizontal-line"></div>
     <el-date-picker v-model="endTime" type="date" default-time="12:00:00" 
                    prefix-icon="el-icon-date" :clearable="false"
                    @change="checkTime('end')" value-format="yyyy/MM/dd" 
                    :picker-options="pickerOptions1">
     </el-date-picker>
</div>

 

js：

data：

data() {
    return {
          startTime: '',
          endTime: '',
          pickerOptions0: {
              disabledDate: (time) => {
                  if (this.endTime !== "" && this.endTime !== null) {
                      let currentTime = new Date(this.endTime);
                      let twoYear = currentTime.setFullYear(currentTime.getFullYear() - 2);
                      return time.getTime() > new Date(this.endTime) || time.getTime() < twoYear;
                  } else {
                      return time.getTime() > Date.now();
                  }
              }
          },
         pickerOptions1: {
             disabledDate: (time) => {
                 if (this.startTime !== '' && this.startTime !== null) {
                     let currentTime = new Date(this.startTime);
                     let twoYear = currentTime.setFullYear(currentTime.getFullYear() + 2);
                     return time.getTime() < new Date(this.startTime) || time.getTime() > twoYear || time.getTime() > Date.now();
                 } else {
                     return time.getTime() > Date.now();
                 }
             }
         }
    }
}

methon：

就略了

 

效果：

ps：清除掉已选的开始/结束时间的值后，时间选择器的可选时间范围又恢复成只可选当日时间之前的任意时间。