【vue】elementui中，el-date-picker组件只能选择当前年份中的日期_年选择器只能看得今年以后的日期

讲解需求：

        当点击的日期中，只能限定在你点击的年份范围内，不得跨年。

举个例子：

         首次点击的开始时间是2022-12-10，那么结束时间不能在2023年或者2021年，只能是2022年范围内的

 讲解过程：

• 实现前提

        1.需获取到开始时间的年份

        2.开始时间年份的第一天，开始时间年份的最后一天

• 实现步骤

        第一步，运用组件中的picker-options属性的onPick函数，可以获取当前选择的年份

onPick:({maxDate,minDate}) =>{}); //拿到minDate的值就是年份

        第二步，需运用到js的new Date()方法，正好讲解一下

 new Date();是转为标准时间 -- Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)

getFullYear()；根据标准时间转化成月份

getTime();根据标准时间转化从时间戳 

let year = minDate.getFullYear();//当前时间
 
let startTime = new Date(year,0);//选中当前时间的开始时间
let endTime = new Dte(startTime.getFullYear()+1,0);//选中当前时间的次年1月
 
//组件需要的是时间戳
this.start = startTime.getTime();
this.end = endtime.getTime()-1;//-1就是12月的最后一天的时间戳

 最终，这是操作前提，还需设置禁用状态...

disabledDate:(time)=>{//做判断}

pickerDisabled: {
  onPick:({maxDate,minDate}) =>{
     let year = minDate.getFullYear(); // 选中的当前年份
 
     const start = new Date(year,0);
     const end = new Date(start.getFullYear()+1,0) //年份的最后一个月+1，就是次年的1月
 
     //时间戳
     this.startDate = start.getTime()
     this.endDate = end.getTime()-1 //次年的1月1日，时间戳-1，就是12月最后一天的时间戳
 
     if(maxDate){ //重新选择时间，当前时间清空
       this.startDate = '';
       this.endDate = '';
     }
   },
  disabledDate: (time)  => {
     if(!this.endDate && !this.startDate){
        return time.getTime() < this.startDate || time.getTime() > this.endDate;
     }
   }
}

 结语：

        撒花✿