skip to Main Content

I’m trying to achieve a simple "month-picker" in Vuetify 3. I went through the documentation and the component’s API, but I can’t seem to find a way to use it.

There is a type property on component, but it doesn’t seem to do anything.

<template>
  <v-app>
    <v-container>
      <v-date-input type="month" label="Date input"></v-date-input>
    </v-container>
  </v-app>
</template>

But the output still contains days.

enter image description here

Whats is weird to me, is that this functionality already existed in Vuetify 2 – https://v2.vuetifyjs.com/en/components/date-pickers-month/.

Am I doing something wrong or is this just a bug?

2

Answers


  1. Chosen as BEST ANSWER

    I've ended up with something like this.

    <script setup>
      import { ref, computed } from 'vue'
    
      const viewMode = ref('year')
      const selectedYear = ref()
      const selectedMonth = ref()
    
      function updateViewMode(mode) {
        viewMode.value = mode === 'year' ? 'year' : 'months'
      }
    
      function updateYear(year) {
        selectedYear.value = year
      }
    
      function updateMonth(month) {
        selectedMonth.value = month
      }
    
      const selectedDate = computed(() => {
        return selectedYear.value !== undefined && selectedMonth.value !== undefined
          ? new Date(selectedYear.value, selectedMonth.value)
          : null
      })
    </script>
    
    <template>
      <v-app>
        <v-container>
          <div>{{ selectedYear }} {{ selectedMonth }} {{ selectedDate }}</div>
          <v-date-picker
            :view-mode="viewMode"
            @update:year="updateYear"
            @update:view-mode="updateViewMode"
            @update:month="updateMonth"
          />
        </v-container>
      </v-app>
    </template>
    

  2. This looks like it is working.

    <script setup>
    import { ref } from 'vue'
    const currentMode = ref('months')
    
    function swapToYear() {
      currentMode.value = 'year'
    }
    </script>
    
    <template>
      <v-app>
        <v-container>
          <v-date-picker :view-mode="currentMode" @update:month="swapToYear">
          </v-date-picker>
        </v-container>
      </v-app>
    </template>
    

    Using view-mode="months" and @update:month fixed the issue.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search