关于el-date-picker设置禁用日期的处理,包含禁用每月的最后一天

文章详细描述了在Vue.js应用中使用el-date-picker组件时,如何根据特定条件禁用日期的选择。这些条件包括:如果无结束日期,则从开始日期到当前日期的最大值的当月最后一天是最早可选日期;如果结束日期小于最小可选日期,只能选择最小可选日期;如果结束日期大于最小可选日期,可以选择两者之间的每月最后一天。文章还提供了相应的pickerOptions配置代码示例。
摘要由CSDN通过智能技术生成

在这里插入图片描述

<el-date-picker
      v-model="value1"
      type="date"
      value-format="yyy-MM-dd"
      :picker-options="pickerOptions"
      placeholder="选择日期">
 </el-date-picker>

data(){
	return{
		value1:'',
		startDate:'',
		endDate:'',
		copyEndDate:''
	}
}
created(){
	this.copyEndDate = JSON.parse(JSON.stringify(this.endDate))
},
//已知有需求,开始日期初始化不为空,此插件选择的为可选的终止日期。在该日期插件上设置禁用日期需满足:
1,如果后端没有返回终止日期,则取开始日期和当前日期的最大值减一天的当月最后一天为最小可选日期。
2,大于最小可选日期的日期只能选每月的最后一天。
3,如果有终止日期,则
	(1),如果终止日期小于最小可选日期,则插件只能选最小可选日期;例如:
			开始日期:2020-01-01
			当前日期:2023-01-01
			终止日期:2021-12-31
			则只能取值:2023-01-012),如果终止日期大于最小可选日期,则可选择范围为最小可选日期至终止日期的中间值的每月最后一天。
			开始日期:2020-01-01
			当前日期:2023-01-01
			终止日期:2025-01-01
			则只能取值:2023-01-012025-01-01的中间日期的每月最后一天

则pickerOption的设置为:

pickerOptions:{
	disabledDate:(time)=>{
		当前日期:
		const currentDate = formatDate(new Date(),'yyyy-MM-dd');
		开始日期:
		const startDate = formatDate(new Date(this.startDate),'yyyy-MM-dd');
		终止日期:
		let endDate = this.copyEndDate; //此处这么取值主要是为了处理点击插件的清空按钮导致终止日期变化的问题
		if(this.endDate){
			if(this.endDate!==this.copyEndDate){
				endDate  = formatDate(new Date(this.copyEndDate),'yyyy-MM-dd');
			}else{
				endDate  = formatDate(new Date(this.endDate),'yyyy-MM-dd');
			}
		}
		//比较出开始日期和当前日期的最大值
		let compDate = startDate>=currentDate?startDate:currentDate;
		//最大值时间戳
		let biggerTime = new Date(compDate).getTime();
		//最大值减一天
		let dicTime = biggerTime -24*60*60*1000;
		
		//减一天后获取比较月的最后一天的年月
		let dicYear = new Date(dicTime).getFullYear();
		let oneDay = new Date(dicTime);
		let dicMounth = oneDay+1<10?"0"+(oneDay.getMonth()+1):oneDay.getMonth()+1;
		//获取比较年月的最后一天
		const monthEndDay = new Date(dicYear,dicMounth,0);
		//获取比较年月的最后一天时间戳
		const monthEndTime = monthEndDay.getTime();
		
		//当前时间插件中的每个月的最后一天的时间戳
		let datePickerYear = new Date(time).getFullYear();
		let onePicDay = new Date(time);
		let pickerMounth = onePicDay +1<10?"0"+(onePicDay .getMonth()+1):onePicDay .getMonth()+1;
		//获取比较年月的最后一天
		const pickerEndDay = new Date(datePickerYear ,pickerMounth ,0);
		//获取比较年月的最后一天时间戳
		const pickerEndTime = pickerEndDay .getTime();
		
		//初始终止日期时间戳
		const endTime = endDate+ " 0:0:0"
		const endedDate =  new Date(endTime).getTime();
		
		if(endedDate && endedDate <=monthEndTime){ //如果初始终止日期小于比较日期,取初始终止日期
			return time.getTime()!==endedDate;
		}else if(endedDate){ //终止日期大于比较日期,取比较日期和终止日期中间的月末
			if(time.getTime()<endedDate&&time.getTime()>=monthEndTime ){
				return time.getTime()!== pickerEndTime;
			}else{ 
				return true;//不是这个区间的全部禁用
			}
		}else{ //如果没有初始终止日期,小于比较日期的全部禁用,大于比较日期的不是最后一天的禁用。
			return time.getTime()!==pickerEndTime&& time.getTime()>monthEndTime || time.getTime()<monthEndTime ;
		}



	}


}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值