Element UI DateTimePicker: 选择一年的时间范围 (基于开始日期)

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始日期"
      :picker-options="startPickerOptions"
    ></el-date-picker>
    <el-date-picker
      v-model="endDate"
      type="datetime"
      placeholder="选择结束日期"
      :picker-options="endPickerOptions"
    ></el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        startDate: '',
        endDate: '',
        startPickerOptions: {
          disabledDate: (time) => {
            if (!this.endDate) {
              return false;
            }
            return time.getFullYear() !== this.endDate.getFullYear();
          }
        },
        endPickerOptions: {
          disabledDate: (time) => {
            if (!this.startDate) {
              return false;
            }
            const minDate = new Date(this.startDate);
            minDate.setFullYear(minDate.getFullYear() + 1);
            return time < minDate;
          }
        }
      };
    }
  };
</script>
<p>通过使用 <code>disabledDate</code> 函数限制日期选择器的可选范围，我们实现了只能选择开始日期所在年份内的日期的功能。在开始日期选择器中，我们判断当前日期的年份是否与结束日期的年份相同，如果不同，则禁用该日期。在结束日期选择器中，我们则判断当前日期是否小于开始日期加上一年，如果小于，则禁用该日期。</p>
<p>注意：在结束日期选择器中，我们使用 <code>minDate</code> 属性来限制可选的最小日期，而这个最小日期是根据开始日期加上一年来计算的。</p>