用el-date-picker设置两个时间,第二个时间不能早于第一个时间
时间: 2023-08-04 20:13:37 浏览: 96
可以在 `el-date-picker` 组件的 `picker-options` 属性中设置 `disabledDate` 方法来实现这个功能。具体的实现过程如下:
1. 在 `data` 中定义两个时间变量 `startTime` 和 `endTime`,并初始化为 `null`。
```html
<template>
<div>
<el-date-picker
v-model="startTime"
type="datetime"
placeholder="开始时间"
:picker-options="pickerOptions"
></el-date-picker>
<el-date-picker
v-model="endTime"
type="datetime"
placeholder="结束时间"
:picker-options="pickerOptions"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startTime: null,
endTime: null,
};
},
computed: {
pickerOptions() {
const self = this;
return {
disabledDate(time) {
// 如果是结束时间,且早于开始时间,则禁用该日期。
if (self.endTime && time < self.startTime) {
return true;
}
return false;
},
};
},
},
};
</script>
```
2. 在 `computed` 中定义 `pickerOptions` 计算属性,并设置 `picker-options` 属性为该计算属性。在 `pickerOptions` 中定义 `disabledDate` 方法,该方法接收一个 `time` 参数,表示当前日期,如果该日期应该被禁用则返回 `true`,否则返回 `false`。
3. 在 `disabledDate` 方法中,先判断当前是否是结束时间,并且结束时间早于开始时间,如果是则禁用该日期,否则不禁用。
阅读全文