需求描述:
1.禁止选择当前日期之后的所有日期
2.选择的时间范围小于等于31天,其他日期禁用
<el-date-picker
v-model="historySubmitModel.historyDateTime"
type="daterange"
range-separator="- "
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@blur="isRestart = true"
value-format="yyyy-MM-dd"></el-date-picker>
data(){
return {
historySubmitModel: {
historyDateTime: [],
},
isRestart: false,
pickerMinDate: '',
pickerOptions: {
onPick: ({
maxDate,
minDate,
}) => {
this.isRestart = false;
this.pickerMinDate = minDate.getTime();
if (maxDate) {
this.pickerMinDate = "";
}
},
disabledDate: (time) => {
if (time.getTime() > Date.now()) {
return time.getTime() > Date.now();
}
if (this.pickerMinDate !== "") {
const one = 31 * 24 * 3600 * 1000;
const minTime = this.pickerMinDate - one;
const maxTime = this.pickerMinDate + one;
return time.getTime() <= minTime || time.getTime() >= maxTime;
}
},
},
}
}