multi-calendars previous months are disappeared on refresh

[qxygene1]

Describe the bug

        <VueDatePicker
          v-model="formStore.dates"
          :range="{ minRange: 3 }"
          auto-apply
          inline
          :multi-calendars="9"
          :enable-time-picker="false"
          :month-change-on-scroll="false"
          hide-offset-dates
          :transitions="false"
          :min-date="dayjs().format()"
          :config="{ noSwipe: true }"
        >
          <template #month-year="{ month, year, months }">
            {{ months[month].text }} {{ year }}
          </template>
        </VueDatePicker>

To Reproduce
after selecting dates in september previous months are disappeared on refresh, calendar starts from september.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop & mobile (please complete the following information):

• Browser [e.g. chrome, safari]
• Library version [e.g. 3.0.0]

[sahilrajthapa]

@qxygene1 Could you share a link to the issue where this issue is reproduced?

[AndreySlashman]

@sahilrajthapa
Hey, I think what @qxygene1 means is that if you have an inline datepicker with multi-calendar then if you have a date selected in a month that is after the "min-date" you need a way to make the datepicker display that min date, otherwise you can't navigate to a previous month if you want the arrows disabled for some reason

Here is an example that I put up:
https://stackblitz.com/edit/vuepic-vue-datepicker-dzjhko5q?file=src%2Fcomponents%2FPlayground.vue

P.S. Please shrink the browser window on the right so the calendar becomes vertical instead of horizontal to better understand the issue

So it would be nice if the datepicker could behave in a similar way as in this, separate example: https://stackblitz.com/edit/vuepic-vue-datepicker-cuybsoyw?file=src%2Fcomponents%2FPlayground.vue

But with the selected date focused (scrolledTo)

[sahilrajthapa]

@AndreySlashman Thanks ! I understood the issue now. I noticed that this issue occurs only if we use template for month-year. Once a date beyond the min date is selected, there’s no way to navigate back to the min date.

I have also reproduced the issue and created an example where the navigation works correctly when we don't use the template.

I will create a PR where we have the navigation even when a month-year template is used.

[AndreySlashman]

@sahilrajthapa Thanks for jumping on it!
But I guess what @qxygene1 proposes is that navigation is still invisible, but instead we could see the previous months up to the :min-date that is set, in other words, he wants it to look exactly the same as in this example https://stackblitz.com/edit/vuepic-vue-datepicker-cuybsoyw?file=src%2Fcomponents%2FPlayground.vue

But with the selected date focused (scrolled to)

That is very beneficial on mobile devides, when you have that multicalendar scrollable, so in order to reach that selected date you need to scroll for quite a while

Or maybe just add an API method scrollToActive or similar to do that manually if needed, or maybe somehow get the selected date's DOM node to scoll to it via different means

Let me know if this makes sense

Some real world example:
Picking a departure date for flights search on mobile devices, there are some constraints: you can't pick a date in the past, only today or later
Imagine you have a date in 3 months selected and then you want to choose the next day. If that calendar is in some sort of a modal window or a popup, when you open it you see the top of the calendar so in order to choose the next day after the selected one you'll have to scroll down 3 months
If there was a way to open that calendar modal window with the selected date "scrolled to" you could choose the next day right away, without having to scroll down every time

[sahilrajthapa]

@AndreySlashman Thanks got it. I think what you have said is like a feature request instead of a bug, opening up a new feature request seems like the right thing to do.

[github-actions]

Stale issue message