<el-date-picker
:picker-options="pickerOptions"
size="small"
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
data() {
return {
value1: "",
choiceDate: "",
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
console.log(maxDate, minDate);
this.choiceDate = minDate.getTime();
if (maxDate) {
this.choiceDate = "";
}
},
disabledDate: (time) => {
if (!isNull(this.choiceDate)) {
const one = 30 * 24 * 3600 * 1000; // 30天 //想控制在多少天范围写多少
const minTime = this.choiceDate - one; // 最小选择得第一个时间 - 30
const maxTime = this.choiceDate + one; // 最大可选第一个时间 + 30
return time.getTime() < minTime || time.getTime() > maxTime; //禁用范围
}
},
}
}
完成结果图
最大可选到
选择12月15号 + 30 day 第二次选择最大范围在1月15直接
最小可选结果图
最小可选到
选择12月15号 - 30 day 第二次选择最小范围在11月14之间