FullCalendar 点击时间修改时<el-date-picker 无法使用
时间: 2023-12-30 21:01:53 浏览: 117
fullcalendar+datetimepicker
5星 · 资源好评率100%
FullCalendar 点击时间修改时,可以通过监听 FullCalendar 的 `select` 事件,获取点击的起始时间和结束时间,然后将时间传递给 `<el-date-picker>` 组件进行修改。
示例代码如下:
```
<template>
<div>
<FullCalendar @select="handleSelect" />
<el-date-picker v-model="selectedDate" type="datetime" />
</div>
</template>
<script>
import FullCalendar from 'fullcalendar';
export default {
components: {
FullCalendar,
},
data() {
return {
selectedDate: null,
};
},
methods: {
handleSelect(start, end) {
this.selectedDate = new Date(start);
},
},
};
</script>
```
在上面的代码中,当用户在 FullCalendar 中选择时间时,会触发 `handleSelect` 方法,在该方法中将选中的起始时间赋值给 `selectedDate`,然后将 `selectedDate` 绑定到 `<el-date-picker>` 组件的 `v-model` 上,从而实现了时间的修改。注意,这里使用了 `type="datetime"` 属性来指定 `<el-date-picker>` 组件的类型为日期时间选择器。
阅读全文