Vuetify date picker add tooltip in disabled days - vue.js

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>