ElementUI日期选择器时间选择范围限制(TypeScrip

举个例子（限制只能选七天之前到今天的日期）

效果截图

html部分

   <el-date-picker v-model="value1"
                    type="date"
                    :picker-options="pickerOptions"
                    placeholder="选择日期"></el-date-picker>

ts部分

  public value1: Date = new Date();
  public pickerOptions: any = {
    disabledDate: (time: any) => {
      const now = Date.now();
      const seven = 7 * 24 * 60 * 60 * 1000;
      const sevenDays = now - seven;
      return time.getTime() > now || time.getTime() < sevenDays;
    },
  };

或者是这样

  public value1: Date = new Date();
  public pickerOptions: any = {};

  public created() {
    this.pickerOptions.disabledDate = (time: any) => {
      const now = Date.now();
      const seven = 7 * 24 * 60 * 60 * 1000;
      const sevenDays = now - seven;
      return time.getTime() > now || time.getTime() < sevenDays;
    };
  }

当两个选择器时限制结束日期不能大于开始日期

效果截图

html部分

  <div class="table">
    <el-date-picker
      v-model="value1"
      type="date"
      @change="changeDate1"
      :picker-options="pickerOptions1"
      placeholder="选择开始日期"
    ></el-date-picker>
    <span class="wall"></span>
    <el-date-picker
      v-model="value2"
      type="date"
      @change="changeDate2"
      :picker-options="pickerOptions2"
      placeholder="选择结束日期"
    ></el-date-picker>
  </div>

ts部分

  public value1: Date | string | number = '';
  public value2: any = '';
  public pickerOptions1: object = {
    disabledDate: (time: Date) => {
      if (this.value2 !== '') {
        return time.getTime() > Date.now() || time.getTime() > this.value2;
      } else {
        return time.getTime() > Date.now();
      }
    },
  };
  public pickerOptions2: any = {};
  // 不能提前声明第二个时间选择器的限制范围，因为提前声明this.value1取的值是声明时的值，也就是''
  public changeDate1(val: Date) {
    this.value1 = val;
    this.pickerOptions2.disabledDate = (time: Date) => {
      return time.getTime() < this.value1 || time.getTime() > Date.now();
    };
  }

  public changeDate2(val: Date) {
    this.value2 = val;
  }

结束日期只能限制在开始日期的前后三天

效果截图

html部分

    <el-date-picker
      v-model="value1"
      type="date"
      @change="changeDate1"
      :picker-options="pickerOptions1"
      placeholder="选择开始日期"
    ></el-date-picker>
    <el-date-picker
      v-model="value2"
      type="date"
      @change="changeDate2"
      :picker-options="pickerOptions2"
      placeholder="选择结束日期"
    ></el-date-picker>

ts部分

  public value1: any = '';
  public value2: any = '';

  public pickerOptions1: object = {
    disabledDate: (time: Date) => {
      if (this.value2) {
        return time.getTime() > new Date(this.value2).getTime();
      } else {
        return time.getTime() > Date.now() - 8.64e7;
      }
    },
  };
  public pickerOptions2: any = {};
  public changeDate1(val: Date) {
    this.value1 = val;
    this.pickerOptions2.disabledDate = (time: Date) => {
      if (this.value1) {
        return (
          time.getTime() <
            new Date(this.value1).getTime() - 1 * 24 * 60 * 60 * 1000 * 3 ||
          time.getTime() >
            new Date(this.value1).getTime() + 1 * 24 * 60 * 60 * 1000 * 3
        );
      }
    };
  }

  public changeDate2(val: Date) {
    this.value2 = val;
  }

end