Heim  >  Fragen und Antworten  >  Hauptteil

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

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


P粉509383150P粉509383150364 Tage vor858

Antworte allen(1)Ich werde antworten

  • P粉458725040

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

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

    现场演示

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

    Antwort
    0
  • StornierenAntwort