Element中DatePicker日期选择器跨度只能选一年如何实现?

在Element UI的DatePicker组件中，如果你想要限制用户只能选择一年的时间跨度，你可以通过设置DatePicker的picker-options属性来实现。以下是一个示例代码：

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      pickerOptions: {
        shortcuts: [{
          text: '一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setFullYear(start.getFullYear() - 1);
            start.setMonth(0);
            start.setDate(1);
            picker.$emit('pick', [start, end]);
          }
        }],
        disabledDate(time) {
          if (!this.value) return false;
          const year = this.value[0].getFullYear();
          const nextYear = year + 1;
          return (
            time.getTime() < this.value[0].getTime() ||
            time.getFullYear() > nextYear
          );
        }
      }
    };
  }
};
</script>

在这个示例中，picker-options的disabledDate函数被用来禁用不在选定年份范围内的日期。shortcuts属性定义了一个快捷方式，点击后可以直接选择去年全年作为时间跨度。这样用户在选择日期范围时只能选择当前年份或去年的整个年度。