<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-01
(2),如果终止日期大于最小可选日期,则可选择范围为最小可选日期至终止日期的中间值的每月最后一天。
开始日期:2020-01-01
当前日期:2023-01-01
终止日期:2025-01-01
则只能取值:2023-01-01至2025-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 ;
}
}
}