v-date-picker, um nur Monat und Jahr auszuwählen

Question

Bitte sagen Sie mir, ob es eine andere Möglichkeit gibt, dies mit v-date-picker zu tun. Ich möchte nur, dass der Benutzer das Jahr und den Monat auswählen kann und dann sollte sich das Datumsauswahlmenü schließen.

Dies ist mein HTML als Beispiel, aber es macht mir nichts aus, anderen Code zu verwenden, solange er weiterhin v-date-picker verwendet.

<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-Methode hat das, was ich versucht habe, aber nicht funktioniert hat

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

Answer 1

在花了几个小时完成这个要求后，我能够实现它。您可以通过观察月份模型值来关闭打开的日期选择器模式。此外，为 元素分配值为 month 的 type 属性。

现场演示：

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

  
    
Selected: {{ txtMonth }}