vue+element ui 日期选择器控件 限制开始时间和结束时间可选的范围

vue+element ui 日期选择器控件 限制开始时间和结束时间可选的范围

应用场景:

日期选择器控件实现开始日期、结束日期的限制选择范围，以便更符合实际情况（本文章的选择范围是一年）。

需求：

1、开始时间和结束时间都不能选当前日期之后的时间。
2、先选开始时间的话，结束时间是在开始时间的后一年内选择（结束时间只能在开始时间加一年内进行选择），也就是不能选开始时间之前的日期并且对开始时间之后的日期也加了一个限制。
3、先选结束时间的话，开始时间也是在结束时间的前一年可选择（开始时间只能在结束时间减一年内进行选择），也就是不能选结束时间之后的日期并且对结束时间之前的日期也加了一个限制。

实现代码

html代码

代码如下（示例）：

<template>
    <el-form ref="form" :model="formData" label-width="">
      <el-form-item size="medium" label="开始时间" label-width="70px">
        <el-date-picker
          v-model="formData.start_time"
          type="date"
          placeholder="开始日期"
          class="input-class"
          format="yyyy-MM-dd"
          :picker-options="pickerOption1"
        />
      </el-form-item>
      <el-form-item size="medium" label="结束时间" label-width="70px">
        <el-date-picker
          v-model="formData.end_time"
          type="date"
          placeholder="结束日期"
          class="input-class"
          format="yyyy-MM-dd"
          :picker-options="pickerOption2"
        />
      </el-form-item>
    </el-form>
</template>

script 代码：

data() {
    return {
     formData: {
        start_time: '',
        end_time: ''
      },
      // 禁用选择未来日期
      pickerOption1: {
        disabledDate: (time) => {
          const oneYears = 365 * 24 * 3600 * 1000 // 365天
          if (this.formData.end_time !== '') {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              // 开始日期要在选择的结束日期之前,大于结束时间的日期不能选
              time.getTime() > new Date(this.formData.end_time).getTime() ||
              // 先选结束时间，在结束时间365天之前的不能选（因为包括自身这一天，所以是减去365天）
              time.getTime() < new Date(this.formData.end_time).getTime() - oneYears 
            )
          }
          return time.getTime() > Date.now() - 8.64e6 // 今天及之前
        }
      },
      pickerOption2: {
        disabledDate: (time) => {
          const oneYears = 365 * 24 * 60 * 60 * 1000
          if (this.formData.start_time) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              // 结束日期要在选择的开始日期之后,小于开始时间的日期不能选
              time.getTime() < new Date(this.formData.start_time).getTime() ||
              // 先选开始时间，在开始时间365天之后的不能选（因为包括自身这一天，所以是加上365天）
              time.getTime() > new Date(this.formData.start_time).getTime() + oneYears 
            )
          }
          return time.getTime() > Date.now() - 8.64e6 // 今天及之前
        }
      },
    }
  },