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 }); } }, }, });
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
元素分配值为month
的type
.Démo en direct :