Vuetify date picker add tooltip in disabled days

Question

How to add tootlip in the disabled days when using the Vuetify's date picker

I cannot seem to find it in documentation, is this possible somehow?

Answer 1

I don't think that you can do this in Vuetify because there are no slots provided to customize the dates' display. I can think of one solution using pure JS. The strategy would be to-

Find all disabled date elements and assign a title attribute (HTML tooltip) to it.

Important 1- The title attribute will not work with the disabled elements, so, you need to use pointer-events: auto on that disabled element. (Reference from this answer.)
Important 2- Above CSS will add a pointer cursor on the disabled button but it won't trigger any click event.

Here is a working demo. Try hovering on disabled dates and you should see a tooltip. Hope this helps.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    date: '2023-02-16',
  }),
  mounted() {
    let disabled_dates = document.querySelectorAll('.v-date-picker-table button');
    disabled_dates.forEach(date => {
      if(date.disabled) {
        date.title = "tooltip";
      }
    })
  },
  methods: {
    allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
  },
})

.v-btn--disabled {
  pointer-events: auto !important;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker
        v-model="date"
        :allowed-dates="allowedDates"
        class="mt-4"
        min="2023-02-01"
        max="2023-02-28"
      ></v-date-picker>
    </v-row>
  </v-app>
</div>