Vuetify 3 - Implementing date picker

Question

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.

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?

Answer 1

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>