V-calendar: v-date-picker initial date is highlighted correctly but the month does not turn

[Uthpala]

The date is highlight correctly but the date picker always show the current month so if i want to show the 15th april in the calendar today ( 30th march )

The calendar will not turn to the correct month

[nathanreyes]

If you set up v-date-picker like this, then April should be displayed in the calendar on initialization, even if the current month is March.

<v-date-picker v-model='date'>
</v-date-picker>

export default {
  data() {
    return {
      date: new Date(2018, 3, 15)
    }
  }
}

Are you saying it is not showing April?

[Uthpala]

This works but

When you add :min-page :available-dates and :max-page It doesn't work. When i remove the :max-page it works.

[nathanreyes]

Can you recreate the issue via jsfiddle? You can fork this fiddle to help get you going.

[EricMcRay]

I have same problem too. available dates does not work well with some other props like min-date, max-date etc. I handle from-page manually by calculating first possible date from available dates object.

[nathanreyes]

Ok I'll definitely reinvestigate. If anyone could provide reproduce with an example, that would go a long ways towards helping fix the issue.

[EricMcRay]

My case may not be bug. My problem is when a first available date after current month date-picker opens current month which all dates disabled, instead of first available date's month. I am not sure how it should behave in this case. It is just looks like a bad UX.

example fiddle: https://jsfiddle.net/eywraw8t/49419/

[zlajaa1]

Is there any clue for this behaviour?

[nathanreyes]

I think the solution for now is to set the from-page prop yourself until I can find the time to debug the solution. Perhaps after the new docs site is released.

[zlajaa1]

ty, will play around

[simeon9696]

Hi, I'm having the same issue, has this been fixed?

[palanideveloper]

from-page

How can I use from-page?

pls provide sample. I new to this technology.

[samhk222]

from-page

How can I use from-page?

pls provide sample. I new to this technology.

<v-calendar :rows="3" :columns="4" :from-date="new Date(2020, 0, 1)"></v-calendar>

[nathanreyes]

Closing outstanding issue that should now be resolved.