Please tell me if there is any other way to do this using v-date-picker. I just want the user to be able to select the year and month and then the date picker menu should close.
This is my html as an example, but I don't mind using different code as long as it still uses v-date-picker.
ts, datePicked method has what I tried but didn't work
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].addEventLis tener("click",function() { console.log('here'); // this.monthMenu = false }); } }, }, });
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
After spending a few hours on this requirement, I was able to implement it. You can turn off an open date picker mode by observing the month model value. Additionally, the
typeattribute with a value ofmonth.Live Demo:
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { monthMenu: false, txtMonth: '', month: '' } }, watch: { monthMenu (val) { val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR')) }, month (val) { this.monthMenu = false; } }, methods: { onInput(dateStr) { const month = dateStr.split('-')[1]; const year = dateStr.split('-')[0]; this.txtMonth = `${month}, ${year}`; } } })sssccc sssccc
Selected: {{ txtMonth }}