I am looking for an alternative approach using the v-date-picker component. My requirement is to allow users to only select the year and month, and then close the date picker menu automatically.
Below is an example of my HTML code, but I am open to using different code as long as it incorporates the v-date-picker functionality:
<v-menu v-model='monthMenu'
:close-on-content-click='false'
:nudge-right='40'
transition='scale-transition'
offset-y
min-width='290px'>
<template v-slot:activator='{ on, attrs }'>
<v-text-field v-model='txtMonth'
label='Month'
prepend-icon='mdi-calendar'
readonly
v-bind='attrs'
v-on='on'
></v-text-field>
</template>
<v-date-picker v-model='month'
@change='datePicked'
color='primary'
scrollable
></v-date-picker>
</v-menu>
The ts file contains the datePicked method where I have attempted some solutions that did not work as expected:
export default Vue.extend({
data() {
return {
monthMenu: false,
month: new Date(new Date().getFullYear(), new Date().getMonth()).toISOString()
.substr(0, 10),
};
},
computed: {
txtMonth(): string {
const [year, month, day] = this.month.split('-');
return `${year}/${month}/${day}`;
},
},
methods: {
datePicked(log: any) {
/* eslint-disable */
console.log('here2');
// const el = document.getElementsByClassName('v-date-picker-table--month') as unknown as HTMLElement;
const acc = document.getElementsByClassName('v-date-picker-table--month');
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",function() {
console.log('here');
// this.monthMenu = false
});
}
},
},
});