1👍
Yes it is possible to disable only year using js
Here I have added a piece of code in mounted hook, this hook will be triggered, once the complete html is rendered
Working codepen here: https://codepen.io/chansv/pen/NWWyNwX?editors=1010
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-date-picker v-model="picker" no-title></v-date-picker>
</v-row>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
picker: new Date().toISOString().substr(0, 10),
}
},
mounted() {
// Select the node that will be observed for mutations
var targetNode = document.querySelector('.v-picker__body');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
var headerBtn = document.querySelector('.accent--text > button');
if (headerBtn.innerHTML.length == 4) {
headerBtn.disabled = true;
headerBtn.style.cursor = 'default';
document.querySelectorAll('.v-date-picker-header > button').forEach(x => {
x.disabled = true;
x.style.cursor = 'default';
});
} else {
document.querySelectorAll('.v-date-picker-header > button').forEach(x => {
x.disabled = false;
x.style.cursor = 'pointer';
});
}
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
}
})
- [Vuejs]-How fix datepicker calendar position in element-ui
- [Vuejs]-How to remove an item from an array?
Source:stackexchange.com