使用elment+moment写年时间段选择

要求：选择年的时间段（不能选择当前年之后的年份）
先看实现效果如

1、html结构代码

<el-form-item label="投产日期：">
 <el-date-picker
    v-model="form.tcrqStart"
    type="year"
    :disabled-date="pickerOptions" 
    @change="yearFilter"
    placeholder="开始年">
  </el-date-picker>
   <span class="year_interval">~</span>
  <el-date-picker
    v-model="form.tcrqEnd"
    type="year"
    :disabled-date="endPickerOptions"
    @focus="endPickerOptions"
    placeholder="结束年">
  </el-date-picker>

</el-form-item>

2、js代码

//引入moment（moment 的使用请看我的上一篇）
import moment from "moment";

const form = reactive({
  tcrqStart: "", // 投产日期-开始日期
  tcrqEnd: "", // 投产日期-结束日期
});

//获取当前年
const nowYear = moment().format("YYYY")

//投产开始日期：当前年之后的不能选择
const pickerOptions = (time) => {
  const timedate = moment(time).format("YYYY");
  return moment(nowYear).isBefore(timedate);
};

//投产结束日期：不符合要求的时间不能选择
const endPickerOptions = (time) => {
  const timedate = moment(time).format("YYYY");
  if(form.tcrqStart){ //当有投产开始日期时，早于开始日期的时间，结束日期不能选择
    const strYear =  moment(form.tcrqStart).format("YYYY")
    return ( moment(nowYear).isBefore(timedate) || moment(timedate).isBefore(strYear) )
  }else{
  	// 当前年之后的不能选择
    return moment(nowYear).isBefore(timedate);
  }
}

// 当有结束日期时，改动开始日期时，开始日期选择的在结束日期起不改动结束日期，否则清空结束日期值
const yearFilter = (val)=>{
  if(form.tcrqEnd){
    const yeardate = moment(val).format("YYYY")
    const endYear = moment(form.tcrqEnd).format("YYYY")
    if(moment(endYear).isBefore(yeardate)){
      form.tcrqEnd = ""
    }
  }
}