element-plus的日期选择器,选择开始时间,自动选择结束时间
时间: 2023-08-13 14:03:03 浏览: 212
带有开始时间和结束时间的日期选择器
3星 · 编辑精心推荐
可以通过监听开始时间的change事件,在回调函数中设置结束时间的值为开始时间加上一定的时间间隔。具体实现可以参考以下代码:
```html
<el-date-picker
v-model="startDate"
type="datetime"
@change="onStartDateChange"
/>
<el-date-picker
v-model="endDate"
type="datetime"
/>
```
```javascript
export default {
data() {
return {
startDate: null,
endDate: null,
intervalHours: 1 // 设置时间间隔为1小时
};
},
methods: {
onStartDateChange(date) {
if (date) {
const intervalMs = this.intervalHours * 60 * 60 * 1000;
const endDate = new Date(date.getTime() + intervalMs);
this.endDate = endDate;
} else {
this.endDate = null;
}
}
}
}
```
这样,选择开始时间后,结束时间就会自动更新为开始时间加上一定的时间间隔。
阅读全文