elementui日期选择器,一个开始日期,一个截止日期,禁掉截止日期
时间: 2024-05-02 20:19:48 浏览: 40
可以通过设置endDatePickerOptions来禁用日期选择器中的截止日期。具体的实现代码如下:
```
<template>
<div>
<el-date-picker
v-model="startDate"
:picker-options="startDatePickerOptions"
type="date"
placeholder="选择开始日期"
></el-date-picker>
<el-date-picker
v-model="endDate"
:picker-options="endDatePickerOptions"
type="date"
placeholder="选择截止日期"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: '',
startDatePickerOptions: {
disabledDate: (time) => {
const endDate = this.endDate
if (endDate) {
return time.getTime() > endDate.getTime()
}
return false
}
},
endDatePickerOptions: {
disabledDate: (time) => {
const startDate = this.startDate
if (startDate) {
return time.getTime() < startDate.getTime()
}
return false
}
}
}
}
}
</script>
```
在上面的代码中,endDatePickerOptions是禁用截至日期的核心。我们通过设置`disabledDate`函数来禁用日期,该函数返回布尔值。如果返回true,表示该日期不可选择,否则表示可选择。在`disabledDate`函数中,我们先获取开始日期和截止日期,然后判断当前日期是否在开始日期和截止日期之间。如果不在该范围内,则返回true,表示该日期不可选择。
这样我们就通过设置endDatePickerOptions成功禁用了日期选择器中的截止日期。
阅读全文