场景：开始日期和结束日期，结束日期必须在开始日期之后，选择了开始日期之后，在选择结束日期时，将开始日期之前的日期设置禁用。
官网说的比较详细了，是利用控件的 options属性，该属性绑定一个对象，给这个对象设置 disabledDate ，disabledDate 是一个函数，如下：
<Date-picker type="date" :options="options3" placeholder="选择日期" style="width: 200px"></Date-picker>
options3: {
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000;
}
}
但遇到如上情况，开始日期在还没选择时，并没有办法进行比较判断。所以需要在拿到开始日期后，修改结束日期的options属性绑定的值。
<FormItem prop="curDate" label="开始日期">
<Date-picker
type="date"
placeholder="请选择开始日期"
:value="form.curDate"
@on-change="curDateChange"
>
</Date-picker>
</FormItem>
<FormItem prop="endDate" label="结束日期">
<Date-picker
type="date"
placeholder="请选择结束日期"
v-model="form.endDate"
@on-change="endDateChange"
:options="endOptions"
>
</Date-picker>
</FormItem>
//开始日期的change事件
curDateChange(e) {
this.form.curDate = e;
this.setDisabledDate();
},
//结束日期的change事件
endDateChange(e) {
this.form.endDate = e;
},
//设置禁用日期
setDisabledDate() {
this.endOptions = {
disabledDate: date => {
let startDate = this.form.curDate
? new Date(this.form.curDate).valueOf()
: "";
return date && date.valueOf() < startDate;
}
};
},
来看看成果图吧
1625672254.jpg
