如何在Vuetify date picker的禁用日期上添加tooltip？

Vuetify官方文档确实没有直接提供给禁用日期绑定Tooltip的API，但可以通过监听DOM变化结合组件事件的方式实现，以下是具体可行方案：

实现思路 #

1. 先通过disabled-dates配置好日期禁用规则
2. 利用Vue的生命周期钩子（mounted）和监听日期选择器的视图切换事件，在DOM更新后定位所有禁用的日期单元格
3. 给禁用单元格绑定鼠标事件，触发Tooltip组件（或直接使用原生title属性）

代码示例 #

基础实现（使用Vuetify内置Tooltip组件） #

<template>
  <v-date-picker
    v-model="selectedDate"
    :disabled-dates="disabledDateRules"
    ref="datePicker"
  ></v-date-picker>

  <!-- 复用的Tooltip组件 -->
  <v-tooltip
    ref="dateTooltip"
    bottom
    :activator="tooltipTrigger"
  >
    <span>{{ tooltipContent }}</span>
  </v-tooltip>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      disabledDateRules: {
        before: new Date().toISOString().split('T')[0], // 禁用过去日期
        dates: ['2024-05-20', '2024-05-25'] // 禁用特定日期
      },
      tooltipContent: '',
      tooltipTrigger: null
    }
  },
  watch: {
    // 监听日期选择器当前显示的月份/年份变化
    '$refs.datePicker.internalActiveDate'() {
      this.$nextTick(() => this.bindTooltipToDisabledCells())
    }
  },
  mounted() {
    this.$nextTick(() => this.bindTooltipToDisabledCells())
  },
  methods: {
    bindTooltipToDisabledCells() {
      // 定位所有禁用的日期单元格
      const disabledCells = this.$refs.datePicker.$el.querySelectorAll('.v-date-picker-table__cell--disabled')

      disabledCells.forEach(cell => {
        // 拼接完整日期，用于判断禁用原因
        const day = cell.textContent.trim()
        const currentViewDate = new Date(this.$refs.datePicker.internalActiveDate)
        const fullDate = new Date(currentViewDate.getFullYear(), currentViewDate.getMonth(), parseInt(day))
        const formattedDate = fullDate.toISOString().split('T')[0]

        // 根据禁用规则设置对应提示文本
        if (formattedDate < new Date().toISOString().split('T')[0]) {
          this.tooltipContent = '过去的日期不可选'
        } else if (this.disabledDateRules.dates.includes(formattedDate)) {
          this.tooltipContent = '该日期已被占用'
        }

        // 绑定鼠标事件触发Tooltip
        cell.addEventListener('mouseenter', () => {
          this.tooltipTrigger = cell
          this.$refs.dateTooltip.isActive = true
        })

        cell.addEventListener('mouseleave', () => {
          this.$refs.dateTooltip.isActive = false
        })
      })
    }
  }
}
</script>

简化实现（使用原生title属性） #

如果不需要复杂的Tooltip样式，直接给禁用单元格添加原生title属性更简单：

// 在bindTooltipToDisabledCells方法中替换为：
disabledCells.forEach(cell => {
  // 同样逻辑判断禁用原因，设置title文本
  const day = cell.textContent.trim()
  const currentViewDate = new Date(this.$refs.datePicker.internalActiveDate)
  const fullDate = new Date(currentViewDate.getFullYear(), currentViewDate.getMonth(), parseInt(day))
  const formattedDate = fullDate.toISOString().split('T')[0]

  let tipText = ''
  if (formattedDate < new Date().toISOString().split('T')[0]) {
    tipText = '过去的日期不可选'
  } else if (this.disabledDateRules.dates.includes(formattedDate)) {
    tipText = '该日期已被占用'
  }

  cell.setAttribute('title', tipText)
})

注意事项 #

• internalActiveDate是Vuetify日期选择器的内部属性，用于跟踪当前显示的月份/年份，监听它可以确保切换月份时重新绑定Tooltip
• 如果禁用规则动态变化，需要额外监听disabledDateRules的变化，触发重新绑定操作

内容的提问来源于stack exchange，提问作者LastM4N