disabledDate根据开始时间设置结束时间禁用状态 vue elementUI

<template>
  <div class="block">
    <span class="demonstration">开始时间</span>
    <el-date-picker
      v-model="startDate"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
      :picker-options="pickerOptionsStart">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">结束时间</span>
    <el-date-picker
      v-model="endDate"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //开始时间限制只能选当前时间之前的
        pickerOptionsStart: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        pickerOptions: {
        //结束时间限制只能选开始时间之后一周的,比如开始时间选1号，结束时间只能选7号
          disabledDate:(time) => {//这里不加箭头函数获取不到this.startDate
            if(new Date(time).getTime() > (new Date(this.startDate).getTime() + 6*24*3600*1000)){
                return time.getTime() > new Date(this.startDate).getTime() + 6*24*3600*1000;
            }else{
                return time.getTime() < new Date(this.startDate).getTime() + 5*24*3600*1000;
            }
          },
        },
        startDate: '',
        endDate: '',
      };
    },
    created(){
        this.setDate()
    },
    methods:{
        //设置默认值开始时间为当前时间的一周前，结束时间为当前日期
        setDate(){
            const start = new Date();
            start.setTime(start.getTime() - 6*24*3600*1000);
            this.startDate = start;
            this.endDate = new Date();
        }
    }
  };
</script>

完整代码如上：相关方法有注释。

上面写的开始和结束时间的输入框是两个单独的输入框，结束时间需要根据开始时间进行计算。两者之间的间隔是正好一周，比如：开始时间选完1号之后，结束时间只有7号这一天可以选择，其他时间都被禁用。同时，还设置了一个默认值，即最近的一周，如：今天7号，那么开始时间是1号，结束时间是7号。