element日期选择器 选择日期限制范围

实现：用 picker-options 控制日期选择范围

需求：日期选择跨度最大支持31天

 <el-form-item label="日期">
    <el-date-picker
    v-model="queryForm.registerDate"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    class="fm_w300"
    @change="getRegisterDate"
    :picker-options="pickerOptions"
    ></el-date-picker>
 </el-form-item>

 data() {
     pickerMinDate: null,
      pickerRange: 31 * 24 * 3600 * 1000, // 可选择日期范围（一个月）
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.pickerRange ||
              time.getTime() < this.pickerMinDate - this.pickerRange
            );
          }
          return false;
        },
      },
  },

需求：只能选今天之后的日期

<el-form-item label="选择日期">
    <el-date-picker
     v-model="expectedDateForm.date"
     type="date"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     placeholder="请选择日期"
     :picker-options="{
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 3600 * 1000 * 24;
        },
      }"
></el-date-picker>
</el-form-item>

需求：只能选今天之前的日期

<el-form-item label="选择日期">
    <el-date-picker
     v-model="expectedDateForm.date"
     type="date"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     placeholder="请选择日期"
     :picker-options="{
        disabledDate: (time) => {
          return time.getTime() > Date.now() - 3600 * 1000 * 24;
        },
      }"
></el-date-picker>
</el-form-item>