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


所有评论(0)