Vuetify datepicker year only max date doesn't trigger vuex state mutation

Question

I have written a small example where I try to update a vuex state for year, by triggering the relevant vuex mutation by selecting the year via a vuetify date-picker (year only). It works quite well except for the curiosity that the ONLY! the max date of the datepicker does not trigger the mutation to change the state. I hope someone has a hint why that is and what I can do, need to mention that the calendar opens by clicking the calendar icon, here is the example:

https://codesandbox.io/embed/vuetifydialogexample-9l619?fontsize=14

Answer 1

If you look at source code, it will compare string

export default function isDateAllowed (date: string, min: string, max: string, allowedFn: AllowedDateFunction | undefined) {
  return (!allowedFn || allowedFn(date)) &&
    (!min || date >= min) &&
    (!max || date <= max)

Your date format is 2020-NaN-NaN, so your comparison:

"2020-NaN-NaN" <= "2020" // false, that's why you can't select 2020
"2019-NaN-NaN" <= "2020" // true, you can select 2019

One dirty way to fix is changing your max value to 2020-NaN-NaN

            <v-date-picker
                reactive
                show-current
                ref="picker" 
                v-model="date"  
                min="2018-NaN-NaN"
                max="2020-NaN-NaN"
                no-title
                >
            </v-date-picker>