vue.js v-日期选择器，仅提供月份和年份选择

hgqdbh6s 于 2023-02-24 发布在 Vue.js

关注(0)|答案(2)|浏览(462)

请让我知道，如果有一个不同的方式来做这与v日期选择器。我只想让用户能够选择年和月，然后日期选择器菜单应该关闭。
这是我的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].addEventListener("click",function() {
            console.log('here');
            // this.monthMenu = false
          });
        }
      },
    },
    });

vue.js

来源：https://stackoverflow.com/questions/75544634/v-date-picker-with-only-month-and-year-selection

2条答案

按热度按时间

deyfvvtc1#

在这个需求上花了几个小时之后，我就能够实现它了。你可以通过观察month模型值来关闭打开的日期选择器模态。另外，为<v-date-picker>元素分配type属性，其值为month。
现场演示**：**

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.1/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"/>

<div id="app">
  <v-app id="inspire">
    <p class="mb-1">Selected: {{ txtMonth }}</p>
    <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'
                     @input='onInput'
                     color='primary'
                     scrollable
                     type="month"
                     ref="picker"
                     ></v-date-picker>
    </v-menu>
  </v-app>
</div>

赞(0）回复(0）举报 2023-02-24

hs1ihplo2#

根据wimanicesir的评论

<v-date-picker v-model='month'
                     @change='monthMenu = false'
                     color='primary'
                     scrollable
                     type='month'
      ></v-date-picker>

我添加了type='month'并删除了datePicked方法。

赞(0）回复(0）举报 2023-02-24

我来回答

vue.js v-日期选择器，仅提供月份和年份选择

2条答案

相关问题

热门标签

最新问答