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?
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>