V-calendar: conflicts between :disabled-dates, :available-dates and :min-date

[jvincent3]

When I use:
<v-date-picker :available-dates="availableDates" :disabled-dates="disabledDates"></v-date-picker>
it disables none.

• If you decide to choose both :disabled-dates and :available-dates it disables none.

• if you decide to choose any of the above with :min-date only the dates inside :min-date are disabled.

Is there a way to have disabled dates inside the available dates?

[GabrielDumbrava]

I also have noticed that if you use :min-date so that you disable the navigation to previous month, then the :available-dates are not taken into consideration. I think they should both work in parallel (min-date to disable left navigation and only show the available-dates).

If I only use available-dates then I can navigate to previous months.

Also, the disabled dates should not be clickable in my opinion, the date selected is still triggered even if the new date is not selected.

[shaks786]

Anyone figured out a way to solve this?

[tafelnl]

Also the docs are quite confusing about this:

Use the min-date, min-page, max-date or max-page props to manually assign the page bounds when using disabled-dates or available-dates.

"page bounds" suggests that you can use min-date and max-date to assign page bounds only. But no notice is made of also missing the functionality of disabling dates.

[tafelnl]

Anyone figured out a way to solve this?

You should be able to use this as a workaround:

instead of using min-date and max-date, use this:

:min-page="{ month: 5, year: 2020 }"
:max-page="{ month: 6, year: 2020 }"

You could even calculate the month and year from a specific date. So it is a bit of an ugly hack. But hey, it works.