Merge pull request #886 from simbacod3/feature/add-calendar-instance-on-count-increment

feat(date-picker): Add calendar instance when count sub-property is incremented from external context

Author: Jasenkoo

src/VueDatePicker/components/DatePicker/DatePicker.vue

@@ -144,6 +144,7 @@
         presetDate,
         selectCurrentDate,
         updateTime,
+        assignMonthAndYear,
     } = useDatePicker(props, emit, triggerCalendarTransition, updateFlowStep);
     const slots = useSlots();
     const { setHoverDate, getDayClassData, clearHoverDate } = useCalendarClass(modelValue, props);
@@ -175,6 +176,16 @@
         { deep: true },
     );
 
+    watch(
+      defaultedMultiCalendars,
+      (newVal, oldVal) => {
+        if (newVal.count - oldVal.count > 0) {
+          assignMonthAndYear();
+        }
+      },
+      { deep: true },
+    );
+
     /**
      * Array of the dates from which calendar is built.
      * It also sets classes depending on picker modes, active dates, today, v-model.

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

@@ -161,7 +161,7 @@ export const useDatePicker = (
     };
 
     // Assign month and year values per date
-    const assignMonthAndYear = (date: Date, fromMount = false): void => {
+    const assignMonthAndYear = (date = new Date(), fromMount = false): void => {
         if (!defaultedMultiCalendars.value.count || !defaultedMultiCalendars.value.static || fromMount) {
             setCalendarMonthYear(0, getMonth(date), getYear(date));
         }
@@ -678,5 +678,6 @@ export const useDatePicker = (
         presetDate,
         selectCurrentDate,
         updateTime,
+        assignMonthAndYear,
     };
 };