fix: Calendar not reflecting values on text-picker in specific modes (fixes #893)

Author: Jasenkoo

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

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref, nextTick, watch } from 'vue';
+import { computed, onMounted, ref, nextTick } from 'vue';
 import {
     add,
     addDays,
@@ -48,8 +48,9 @@ export const useDatePicker = (
     const tempRange = ref<Date[]>([]);
     const lastScrollTime = ref(new Date());
     const clickedDate = ref<ICalendarDay | undefined>();
+    const reMap = () => mapInternalModuleValues(props.isTextInputDate);
 
-    const { modelValue, calendars, time, today } = useModel(props, emit);
+    const { modelValue, calendars, time, today } = useModel(props, emit, reMap);
     const {
         defaultedMultiCalendars,
         defaultedStartTime,
@@ -103,16 +104,6 @@ export const useDatePicker = (
         }
     };
 
-    watch(
-        modelValue,
-        (newVal, oldVal) => {
-            if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-                mapInternalModuleValues(props.isTextInputDate);
-            }
-        },
-        { deep: true },
-    );
-
     onMounted(() => {
         if (!props.shadow) {
             if (!modelValue.value) {

src/VueDatePicker/components/MonthPicker/month-picker.ts

@@ -38,8 +38,10 @@ export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
         defaultedFilters,
         defaultedMultiDates,
     } = useDefaults(props);
-
-    const { modelValue, year, month: instanceMonth, calendars } = useModel(props, emit);
+    const reMap = () => {
+        if (props.isTextInputDate) onYearSelect(getYear(getDate(props.startDate)), 0);
+    };
+    const { modelValue, year, month: instanceMonth, calendars } = useModel(props, emit, reMap);
     const months = computed(() => getMonths(props.formatLocale, props.locale, props.monthNameFormat));
     const hoverDate = ref<Date | null>(null);
     const { checkMinMaxRange } = useValidation(props);

src/VueDatePicker/components/TimePicker/time-picker.ts

@@ -10,7 +10,10 @@ import type { TimeModel, VueEmit } from '@/interfaces';
 import { localToTz } from '@/utils/timezone';
 
 export const useTimePicker = (props: PickerBasePropsType, emit: VueEmit) => {
-    const { modelValue, time } = useModel(props, emit);
+    const reMap = () => {
+        if (props.isTextInputDate) setTimeFromModel();
+    };
+    const { modelValue, time } = useModel(props, emit, reMap);
     const { defaultedStartTime, defaultedRange, defaultedTz } = useDefaults(props);
     const { updateTimeValues, getSetDateTime, setTime, assignStartTime, disabledTimesConfig, validateTime } =
         useTimePickerUtils(props, time, modelValue, updateFlowStep);

src/VueDatePicker/components/YearPicker/year-picker.ts

@@ -17,7 +17,10 @@ import type { PickerBasePropsType } from '@/props';
 import type { VueEmit, IDefaultSelect } from '@/interfaces';
 
 export const useYearPicker = (props: PickerBasePropsType, emit: VueEmit) => {
-    const { modelValue } = useModel(props, emit);
+    const reMap = () => {
+        if (props.isTextInputDate) focusYear.value = getYear(getDate(props.startDate));
+    };
+    const { modelValue } = useModel(props, emit, reMap);
     const hoverDate = ref<Date | null>(null);
     const { defaultedHighlight, defaultedMultiDates, defaultedFilters, defaultedRange, propDates } = useDefaults(props);
     const focusYear = ref();

src/VueDatePicker/components/shared/month-quarter-picker.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { addYears, differenceInYears, endOfYear, getMonth, getYear, set, startOfYear, subYears } from 'date-fns';
 
 import { checkHighlightYear, getDate, getMinMaxYear, resetDate, validateMonthYear } from '@/utils/date-utils';
@@ -114,11 +114,23 @@ export const useMonthOrQuarterPicker = ({
         }
     };
 
-    onMounted(() => {
+    const assign = () => {
         checkModelValue();
         if (multiCalendars.value.count) {
             assignMultiCalendars();
         }
+    };
+
+    watch(modelValue, (newVal, oldVal) => {
+        if (props.isTextInputDate) {
+            if (JSON.stringify(newVal ?? {}) !== JSON.stringify(oldVal ?? {})) {
+                assign();
+            }
+        }
+    });
+
+    onMounted(() => {
+        assign();
     });
 
     const selectYear = (year: number, instance: number) => {

src/VueDatePicker/composables/model.ts

@@ -8,7 +8,7 @@ import type { PickerBasePropsType } from '@/props';
 import { useDefaults } from '@/composables/defaults';
 import { localToTz } from '@/utils/timezone';
 
-export const useModel = (props: PickerBasePropsType, emit: VueEmit) => {
+export const useModel = (props: PickerBasePropsType, emit: VueEmit, reMap?: () => void) => {
     const { defaultedRange, defaultedTz } = useDefaults(props);
 
     const today = getDate(localToTz(getDate(), defaultedTz.value.timezone));
@@ -66,6 +66,18 @@ export const useModel = (props: PickerBasePropsType, emit: VueEmit) => {
                 calendars.value[instance] ? calendars.value[instance].year : 0,
     );
 
+    watch(
+        modelValue,
+        (newVal, oldVal) => {
+            if (reMap) {
+                if (JSON.stringify(newVal ?? {}) !== JSON.stringify(oldVal ?? {})) {
+                    reMap();
+                }
+            }
+        },
+        { deep: true },
+    );
+
     return {
         calendars,
         time,