设置两个el-date-picker,并限制第二个时间不得早于第一个时间
时间: 2023-08-04 12:13:44 浏览: 740
你可以使用`@change`事件来监听第一个时间选择器的变化,然后在事件处理函数中更新第二个时间选择器的最小日期。
HTML代码:
```html
<template>
<div>
<el-date-picker v-model="startTime" type="datetime" @change="handleStartTimeChange"></el-date-picker>
<el-date-picker v-model="endTime" type="datetime" :picker-options="endPickerOptions"></el-date-picker>
</div>
</template>
```
JavaScript代码:
```js
export default {
data() {
return {
startTime: null,
endTime: null,
endPickerOptions: {
disabledDate: time => time.getTime() < this.startTime.getTime()
}
};
},
methods: {
handleStartTimeChange() {
if (this.endTime && this.startTime > this.endTime) {
this.endTime = null;
}
this.endPickerOptions.disabledDate = time => time.getTime() < this.startTime.getTime();
}
}
};
```
在上面的代码中,我们使用了`endPickerOptions`对象来设置第二个时间选择器的选项,其中`disabledDate`属性用于设置不可选日期的函数。在第一个时间选择器的`@change`事件处理函数中,我们首先判断第二个时间选择器的值是否早于第一个时间选择器的值,如果是,则将第二个时间选择器的值清空。然后更新`endPickerOptions`对象的`disabledDate`属性,使得它能够动态地根据第一个时间选择器的值来限制第二个时间选择器的可选范围。
阅读全文