讲解需求:

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

举个例子:

         首次点击的开始时间是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;
     }
   }
}

 结语:

        撒花✿

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐