一个el-date-picker为起始时间,另一个el-date-picker为结束时间,用户选择起始时间不能大于技术时间的校验规则
时间: 2023-08-03 13:42:30 浏览: 101
您可以为第一个el-date-picker设置一个@change事件,在该事件中根据选择的起始时间与当前时间进行比较,如果起始时间晚于当前时间,则将起始时间重置为当前时间。具体代码如下:
```html
<template>
<div>
<el-date-picker v-model="startDate" type="date" :picker-options="startPickerOptions" @change="handleStartDateChange"></el-date-picker>
<el-date-picker v-model="endDate" type="date" :picker-options="endPickerOptions"></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: '',
startPickerOptions: {
disabledDate: time => {
// 禁止选择晚于当前时间的日期
return time.getTime() > Date.now()
}
},
endPickerOptions: {
disabledDate: time => {
// 禁止选择早于起始时间的日期
return time.getTime() < new Date(this.startDate).getTime()
}
}
}
},
methods: {
handleStartDateChange(date) {
const now = Date.now()
if (new Date(date).getTime() > now) {
this.startDate = new Date(now)
}
}
}
}
</script>
```
在上面的代码中,第一个el-date-picker为起始时间,第二个el-date-picker为结束时间。在起始时间的picker-options中,我们设置了一个disabledDate函数,用于禁止选择晚于当前时间的日期。在结束时间的picker-options中,我们设置了一个disabledDate函数,用于禁止选择早于起始时间的日期。在第一个el-date-picker的@change事件中,我们获取选择的起始时间,如果起始时间晚于当前时间,则将起始时间重置为当前时间。这样用户就无法选择晚于当前时间的起始时间了。
阅读全文