'Vuetify Pick Only Year (YYYY) from date

How do I select only year from Vuetify Datepicker ?

I have a requirement where I need a drop down to select only the year YYYY.

But the default Vuetify date-picker picks the whole YYYY-MM-DD format.

enter image description here

enter image description here

vue.jsvuetify.js


Solution 1:[1]

It isn't supported using the type prop.

But a workaround is setting this.$refs.picker.activePicker to type YEAR. We can create a watcher to watch the menu property, and change activePicker to YEAR when the menu is opened:

watch: {
    menu (val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
    }
}

Next, we need to close the menu as soon as the user selects a year. We do it by adding @click:year event on the picker:

<v-date-picker
    v-model="year"
    ref="picker"
    no-title
    scrollable
    @click:year="saveYear(year)"
>
    <v-spacer></v-spacer>
    <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
    <v-btn text color="primary" @click="saveYear(year)">OK</v-btn>
</v-date-picker>

The saveYear method:

saveYear(year) {
    this.$refs.menu.save(year)

    // Reset activePicker to type YEAR
    this.$refs.picker.activePicker = 'YEAR'

    // Close the menu/datepicker
    this.menu = false
}

Solution 2:[2]

My solution:

 <v-date-picker
    v-model="year"
    ref="picker"
    no-title
    scrollable
    @input="saveYear(year)"
>
</v-date-picker>

The saveYear method:

saveYear(year) {
  this.$refs.picker.internalActivePicker = 'YEAR'
}

The year watch :

year (val) {
   if (val){
      this.$refs.picker.internalActivePicker = 'YEAR'
   }
}

Solution 3:[3]

vuetify attribute have "type"

YYY-MM only month and year

 <v-date-picker type="month">
 </v-date-picker>

YYY only year

 <v-date-picker type="year">
 </v-date-picker>

for full date

YYY-MM-DD (just remove type)

 <v-date-picker>
 </v-date-picker>

method 2 :In New vuetify

update ( :active-picker.sync="'YEAR'" )

<v-date-picker
        :active-picker.sync="'YEAR'"
      ></v-date-picker>

THATS IT

Solution 4:[4]

add attribute :active-picker.sync="'YEAR'"

<v-date-picker
        :active-picker.sync="'YEAR'"
      ></v-date-picker>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nadir Abbas
Solution 2 Rony Developer
Solution 3
Solution 4 ßãlãjî

Related Questions