html:
<el-date-picker v-model="idStartDate" type="date" value-format="yyyy-MM-dd" :picker-options="startPickerOptions" @focus="startDateFocus" /> 至
<el-date-picker v-model="idLimitDate" type="date" value-format="yyyy-MM-dd" :picker-options="endPickerOptions" @focus="endDateFocus" />
data:
data(){
return{
idStartDate: '', // 开始日期
idLimitDate: '', // 结束日期
startPickerOptions: {},
endPickerOptions: {},
}
}
methods:
methods: {
stringDateToTimestamp(stringDate) {
return Date.parse(new Date(stringDate));
},
startDateFocus() {
this.idLimitDate = ''
let idLimitDate = this.idLimitDate;
if (!idLimitDate) return;
let that = this;
that.startPickerOptions = {
disabledDate(time) {
return time.getTime() >= that.stringDateToTimestamp(idLimitDate) - 1 * 24 * 3600 * 1000;
},
};
},
endDateFocus() {
let idStartDate = this.idStartDate;
if (!idStartDate) return;
let that = this;
that.endPickerOptions = {
disabledDate(time) {
return time.getTime() <= that.stringDateToTimestamp(idStartDate);
},
};
},
}
最终样式: