需求:可选的时间范围不超过366天
主要思路:在picker-options对象中,禁用日期通过 disabledDate来设置。但是要先拿到第一次选的时间。onPick 是选中日期后会执行的回调,通过这个获取第一次选中的时间
<el-date-picker
:picker-options="pickerOptions"
v-model="daterange"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
data() {
return {
pickerMinDate: "",//第一次选中的时间
pickerOptions: {
onPick: obj => {
this.pickerMinDate = new Date(obj.minDate).getTime();
},
disabledDate: time => {
if (this.pickerMinDate) {
const day1 = 366 * 24 * 3600 * 1000;
let maxTime = this.pickerMinDate + day1;
let minTime = this.pickerMinDate - day1;
return time.getTime() > maxTime || time.getTime() < minTime;
}
}
}
}
}
最终效果: