v-date-picker pour sélectionner uniquement le mois et l'année
P粉509383150
P粉509383150 2023-11-10 14:05:05
0
1
932

Veuillez me dire s'il existe un autre moyen de procéder en utilisant v-date-picker. Je veux juste que l'utilisateur puisse sélectionner l'année et le mois, puis le menu de sélection de date devrait se fermer.

Ceci est mon code HTML à titre d'exemple, mais cela ne me dérange pas d'utiliser un code différent tant qu'il utilise toujours 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, la méthode datePicked a ce que j'ai essayé mais n'a pas fonctionné

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粉509383150
P粉509383150

répondre à tous(1)
P粉458725040

Après avoir passé quelques heures sur cette exigence, j'ai pu la mettre en œuvre. Vous pouvez désactiver un mode de sélection de date ouvert en observant la valeur du modèle mensuel. Aussi, pour l'attribut 元素分配值为 monthtype.

Démo en direct :

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal