fix: multi-calendars not correctly displayed in specific range differences (fixes #540)

Author: Jasenkoo

src/VueDatePicker/components/DatePicker/DpHeader.vue

@@ -27,12 +27,13 @@
                     <button
                         type="button"
                         class="dp__btn dp__month_year_select"
+                        tabindex="0"
+                        :aria-label="type.ariaLabel"
+                        :ref="(el) => setElRefs(el, i + 1)"
+                        :data-test="`${type.type}-toggle-overlay-${instance}`"
                         @click="type.toggle"
                         @keydown.enter.prevent="type.toggle"
                         @keydown.space.prevent="type.toggle"
-                        :aria-label="type.ariaLabel"
-                        tabindex="0"
-                        :ref="(el) => setElRefs(el, i + 1)"
                     >
                         <slot v-if="$slots[type.type]" :name="type.type" v-bind="{ text: type.text }" />
                         <template v-if="!$slots[type.type]">{{ type.text }}</template>

src/VueDatePicker/components/DatePicker/date-picker.ts

@@ -3,7 +3,6 @@ import {
     add,
     addDays,
     addMonths,
-    differenceInMonths,
     getHours,
     getMinutes,
     getMonth,
@@ -154,9 +153,18 @@ export const useDatePicker = (
         }
     };
 
+    /**
+     * In case of multi-calendars, check if the range can fit within the view
+     * If it can, set focus index to the first date in the range, rest will be auto adjusted
+     * In case of solo multi calendars, always take 0 index as reference
+     */
     const getRangeFocusIndex = (dates: Date[]) => {
         if (defaultedMultiCalendars.value.count) {
-            return Math.abs(differenceInMonths(dates[0], dates[1])) >= defaultedMultiCalendars.value.count ? 1 : 0;
+            if (defaultedMultiCalendars.value.solo) return 0;
+            const startMonth = getMonth(dates[0]);
+            const endMonth = getMonth(dates[1]);
+            const showInTheSameView = Math.abs(endMonth - startMonth) < defaultedMultiCalendars.value.count;
+            return showInTheSameView ? 0 : 1;
         }
         return 1;
     };

tests/unit/behaviour.spec.ts

@@ -4,9 +4,10 @@ import { utcToZonedTime } from 'date-fns-tz/esm';
 
 import { resetDateTime } from '@/utils/date-utils';
 
-import { openMenu } from '../utils';
+import { getMonthName, openMenu } from '../utils';
 import type { TimeModel } from '@/interfaces';
 import type { VueWrapper } from '@vue/test-utils';
+import type { AllPropsType } from '@/props';
 
 describe('It should validate various picker scenarios', () => {
     it('Should dynamically disable times', async () => {
@@ -53,8 +54,7 @@ describe('It should validate various picker scenarios', () => {
 
         const year = getYear(date);
 
-        const month = new Intl.DateTimeFormat('en-Us', { month: 'short', timeZone: 'UTC' }).format(date);
-        const monthName = month.charAt(0).toUpperCase() + month.substring(1);
+        const monthName = getMonthName(date);
 
         await dp.find(`[data-test="${monthName}"]`).trigger('click');
         await dp.find(`[data-test="${year}"]`).trigger('click');
@@ -213,4 +213,39 @@ describe('It should validate various picker scenarios', () => {
 
         await validate(startTimes, dpRange);
     });
+
+    it('Should correctly display months in multi-calendars based on the given range', async () => {
+        const today = new Date();
+        const sameViewRange = [today, addMonths(today, 1)];
+        const diffViewRange = [today, addMonths(today, 3)];
+
+        const dp = await openMenu({ modelValue: sameViewRange, multiCalendars: true, range: true });
+
+        const validateMonthAndYearValues = (index: number, date: Date) => {
+            const month = dp.find(`[data-test="month-toggle-overlay-${index}"]`);
+            const year = dp.find(`[data-test="year-toggle-overlay-${index}"]`);
+            expect(month.text()).toEqual(getMonthName(date));
+            expect(+year.text()).toEqual(getYear(date));
+        };
+
+        const reOpenMenu = async (newProps: Partial<AllPropsType>) => {
+            dp.vm.closeMenu();
+            await dp.setProps(newProps);
+            await dp.vm.$nextTick();
+            dp.vm.openMenu();
+            await dp.vm.$nextTick();
+        };
+
+        validateMonthAndYearValues(0, sameViewRange[0]);
+        validateMonthAndYearValues(1, sameViewRange[1]);
+
+        await reOpenMenu({ modelValue: diffViewRange });
+
+        validateMonthAndYearValues(0, diffViewRange[1]);
+
+        await reOpenMenu({ modelValue: diffViewRange, multiCalendars: { solo: true } });
+
+        validateMonthAndYearValues(0, diffViewRange[0]);
+        validateMonthAndYearValues(1, diffViewRange[1]);
+    });
 });

tests/utils.ts

@@ -13,3 +13,8 @@ export const openMenu = async (props: Partial<AllPropsType>) => {
     await dp.vm.$nextTick();
     return dp;
 };
+
+export const getMonthName = (date: Date) => {
+    const month = new Intl.DateTimeFormat('en-Us', { month: 'short', timeZone: 'UTC' }).format(date);
+    return month.charAt(0).toUpperCase() + month.substring(1);
+};