el-date-picker组件日期时间选择器限制可选时间范围为当前时间的前一个月或后一个月或当前时间之前的时间不可选

当项目用到element中el-date-picker时间选择框的时候，有时会需要对时间可选范围进行规定一下，我遇到的是需要规定最大选择范围是当前时间的前一个月或后一个月。

先看效果图:

接下来上template中的代码：

<div class="block">
      <span class="demonstration">请选择时间</span>
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        clearable
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss" // 设置输出值的格式
        :default-time="['00:00:00', '23:59:59']" // 选中日期后的默认具体时刻
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>

我们需要在组件中添加：     

:picker-options="pickerOptions"

data中代码：

data() {
    return {
      value1: [],
      // 日期时间范围在一个月以内
      selectDate: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
    };
  },

这样问题就可以解决了！

如果还需要设置为当前时间之前不可用，我们只需要在pickerOptions代码改为：

pickerOptions: {
        disabledDate: (time) => {
          return Date.now() - 3600 * 1000 * 24 > time.getTime();
        },
      },

另一种方式：

pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },