elementui日期选择器,一个开始日期,一个截止日期,禁掉截止日期
时间: 2024-05-12 09:16:26 浏览: 209
,如何实现?
您可以使用 elementui 的 disabledDate 属性来禁用日期选择器中的特定日期。为此,您可以先在 data 属性中声明一个变量 disabledEndDate 并将其设置为 true,然后在日期选择器的截止日期部分的节点上添加 :disabled="disabledEndDate" 属性即可。具体代码如下:
```
<el-date-picker
v-model="startDate"
type="date"
:disabledDate="disabledEndDate">
</el-date-picker>
<el-date-picker
v-model="endDate"
type="date"
:disabled="disabledEndDate">
</el-date-picker>
```
然后在您的 methods 部分,您可以添加以下代码来监听开始日期的变化,并将结束日期禁用:
```
methods: {
handleDateChange() {
if (this.startDate) {
this.disabledEndDate = {
disabledDate(date) {
return date < this.startDate;
}
};
}
}
}
```
现在当您设置开始日期后,截止日期部分将被禁用,直到您清除开始日期。
阅读全文