multi-calendars previous months are disappeared on refresh #1081
Description
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]
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Participants
Activity
sahilrajthapa commentedon Mar 17, 2025
@qxygene1 Could you share a link to the issue where this issue is reproduced?
AndreySlashman commentedon Apr 27, 2025
@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 commentedon Apr 27, 2025
@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 commentedon Apr 28, 2025
@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 commentedon May 1, 2025
@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 commentedon Jul 1, 2025
Stale issue message