Vuetify 2.1.x版本v-calendar@click:time事件无小时返回值如何解决？

架构老林

2026-9-27

问题原因

Vuetify 2.1.x版本存在已知bug，该版本重构了v-calendar组件的@click:time事件逻辑，返回的第一个日期参数仅包含年月日信息，缺失了时分相关的时间字段。

解决方案

你可以根据项目实际情况选择以下任意一种方案处理：

方案1：手动计算完整时间（无需修改组件代码/升级版本）

2.1.x版本的@click:time事件会返回两个参数，第二个参数包含当前点击时间槽的索引信息，结合你配置的interval-minutes属性即可计算出准确的点击时间，参考代码如下：

methods: {
  test (date, clickEvent) {
    // 计算当前时间槽的偏移分钟数
    const offsetMinutes = clickEvent.slotIndex * this.schedulerObj.intervalDuration
    // 拼接得到完整的点击时间
    const clickedTime = new Date(date)
    clickedTime.setHours(Math.floor(offsetMinutes / 60), offsetMinutes % 60, 0, 0)
    // 后续业务逻辑直接使用clickedTime即可
    console.log(clickedTime)
  }
}

方案2：通过自定义插槽绑定点击事件

如果不想手动计算时间，可以自定义时间槽插槽，直接绑定点击事件传递完整时间，组件代码修改如下：

<v-calendar
  ref="calendar"
  :locale="$i18n.locale"
  v-model="schedulerObj.calViewValue"
  :weekdays="weekday"
  :type="type"
  :events="events"
  :event-overlap-mode="mode"
  :event-overlap-threshold="30"
  :event-color="getEventColor"
  :interval-minutes="schedulerObj.intervalDuration"
>
  <template v-slot:time="{ date, time }">
    <div @click="test(new Date(date.getTime() + time * 60 * 1000))" style="width: 100%; height: 100%"></div>
  </template>
</v-calendar>