請告訴我是否有其他方法可以使用 v-date-picker 來執行此操作。我只希望用戶能夠選擇年份和月份,然後日期選擇器選單應該關閉。
這是我的 html 作為範例,但我不介意使用不同的程式碼,只要它仍然使用 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 方法有我嘗試過但不起作用的方法
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 }); } }, }, });
在花了幾個小時完成這個要求後,我能夠實現它。您可以透過觀察月份模型值來關閉開啟的日期選擇器模式。此外,為
元素指派值為month
的type
屬性。現場示範: