要求
1、时间跨度为半个月
2、不能选择大于当前日期的时间
页面效果
api 语法
实现
<el-date-picker
v-model="value1"
type="daterange"
:picker-options="pickerBeginDateBefore"
@change='selectData'
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
data() {
return {
value1: '',
minDate:'',
maxDate:'',
pickerBeginDateBefore:{
onPick:({maxDate,minDate})=>{
this.minDate=minDate;
this.maxDate=maxDate;
},
disabledDate:time=> {
let three=15*24*3600*1000;
if(this.minDate){
return time.getTime() > Date.now()||time>(new Date(this.minDate.getTime()+three))||time<(new Date(this.minDate.getTime()-three));
}
return time.getTime() > Date.now();
}
},
};
methods: {
selectData(e){
if(e===null){
this.minDate='';
this.maxDate='';
this.pickerBeginDateBefore={
disabledDate:time=> {
let three=15*24*3600*1000;
if(this.minDate){
return time.getTime() > Date.now()|| time>(new Date(this.minDate.getTime()+three))||time<(new Date(this.minDate.getTime()-three));
}
return time.getTime() > Date.now();
}
};
}
},
}
补充:
若需求为 只能选择最近一个月的时间,限定规则为:
pickerOptions: {
disabledDate(time){
return time.getTime() > Date.now()-(24*60*60*1000) || time.getTime() < (Date.now()-(30*24*60*60*1000));
}
},