image.png
image.png
image.png
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="开始时间">
<el-date-picker v-model="form.startTime" size="small" format="yyyy-MM-dd" style="width:350px;" :picker-options="pickerOptionsStart"
value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="form.endTime" :disabled="form.startTime==null" size="small" format="yyyy-MM-dd" style="width:350px;"
:picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd" type="date" placeholder="选择结束时间">
</el-date-picker>
</el-form-item>
</el-form>
data() {
return {
form: {
startTime: null,
endTime: null
},
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.form.endTime;
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime();
} else {
return time.getTime() < Date.now() - 8.64e7;
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.form.startTime;
if (beginDateVal) {
return (time.getTime() < new Date(beginDateVal).getTime()
)
} else {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
},
watch: {
'form.startTime'() {
if (this.form.startTime == null) {
this.form.endTime = null
}
}
}
