Home  >  Q&A  >  body text

v-date-picker to select only month and year

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.

<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>

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
          });
        }
      },
    },
    });


P粉509383150P粉509383150278 days ago656

reply all(1)I'll reply

  • P粉458725040

    P粉4587250402023-11-11 11:54:20

    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 element is assigned a type attribute with a value of month.

    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 }}

    reply
    0
  • Cancelreply