vue中如何让el-date-picker时间选择器组件结束时间不早于开始时间?
1.在视图中
<el-date-picker
v-model="searchForm.startTime"
:picker-options="startPickerOptions"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间"
/>
<el-date-picker
v-model="searchForm.endTime"
:picker-options="endPickerOptions"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择结束时间"
/>
2.javascript
data() {
return {
searchForm: {
startTime: '',
endTime: '',
},
startPickerOptions: {
disabledDate: (time) => {
let endTime = this.searchForm.endTime
if (endTime) {
return time.getTime() > new Date(endTime).getTime()
}
}
},
endPickerOptions: {
disabledDate: (time) => {
let startTime = this.searchForm.startTime
if (startTime) {
return time.getTime() < new Date(startTime).getTime()
}
}
},
}
3.示例图: