设置两个el-date-picker,精确到分限制第二个时间不得早于第一个时间
时间: 2023-08-04 19:13:53 浏览: 277
可以通过监听第一个日期选择器的值变化事件,然后设置第二个日期选择器的最小值来实现限制。具体代码如下:
```html
<template>
<div>
<el-date-picker
v-model="startTime"
type="datetime"
placeholder="选择开始时间"
@change="handleStartTimeChange"
></el-date-picker>
<el-date-picker
v-model="endTime"
type="datetime"
placeholder="选择结束时间"
:picker-options="endPickerOptions"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startTime: null,
endTime: null,
};
},
computed: {
endPickerOptions() {
// 设置结束时间选择器的最小值为第一个时间选择器的值
if (this.startTime) {
return {
disabledDate: (time) => {
return time.getTime() < this.startTime.getTime();
},
};
} else {
return {};
}
},
},
methods: {
handleStartTimeChange() {
// 当第一个时间选择器的值变化时,重新计算结束时间选择器的最小值
this.endTime = null;
},
},
};
</script>
```
在上面的代码中,我们监听第一个日期选择器的 `change` 事件,当它的值变化时,通过计算设置第二个日期选择器的 `picker-options` 属性,来限制它的最小值不能早于第一个日期选择器的值。同时,我们在 `handleStartTimeChange` 方法中将第二个日期选择器的值设为 `null`,以便重新计算它的最小值。
阅读全文