简单的例子,要求开始日期不能小于结束日期(用禁用选择的方式)
<el-date-picker
value-format="yyyy-MM-dd"
size="mini"
v-model="date1"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions1">
</el-date-picker>
<el-date-picker
value-format="yyyy-MM-dd"
size="mini"
v-model="date2"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions2">
</el-date-picker>
data:
data() {
return {
//为''或为null都可以
date1: '',
date2: '',
pickerOptions1: {
disabledDate:(time)=> {
if(this.date2) return time.getTime() > new Date(this.date2).getTime();
else return
}
},
pickerOptions2: {
disabledDate:(time)=> {
if(this.date1) return time.getTime() < new Date(this.date1).getTime();
else return
}
},
}
}
一、不能用 disabledDate(time) { } 这种普通函数形式,必须用箭头函数,否则 this 的指向一定是错的
二、如果 disabledDate:(time)=> { } 里不用 if else,则 clear之后会出现bug(全部都禁用了)