基于element-ui的时间选择器date-picker，如何实现年份区间选择。

Question

类似于这种效果的

Answer 1

方案一

date-picker组件并没有yearrange的type属性值，最接近的是monthrange，该组件虽然下拉的时候是显示月份，但是要选择年份范围只需要选中当年即可获得范围值，体验稍微比较差点。

<el-date-picker
 type="monthrange"
 align="right"
 :clearable="false"
 unlink-panels
 range-separator="-"
 start-placeholder="开始日期"
 end-placeholder="结束日期"
 format="yyyy" //显示年份
 value-format="yyyy" //传值格式
 @change="onChange"
>
</el-date-picker>

onChange(value){
    console.log(value[0],value[1]) //2020,2021
}

方案二
【vue】实现年份范围选择器 <year-range-picker>