fix: Wrong today and initial time when timezone is set (fixes #579)

Vuepic · Sep 19, 2023 · f023638 · f023638
1 parent 4984832
commit f023638
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/VueDatePicker/composables/calendar-class.ts b/src/VueDatePicker/composables/calendar-class.ts
@@ -3,7 +3,15 @@ import { addDays } from 'date-fns';
 
 import { useDefaults, useValidation } from '@/composables/index';
 import { isModelAuto } from '@/utils/util';
-import { isDateAfter, isDateBefore, isDateBetween, isDateEqual, getDate, getWeekFromDate } from '@/utils/date-utils';
+import {
+    isDateAfter,
+    isDateBefore,
+    isDateBetween,
+    isDateEqual,
+    getDate,
+    getWeekFromDate,
+    getZonedDate,
+} from '@/utils/date-utils';
 
 import type { UnwrapRef, WritableComputedRef } from 'vue';
 import type { ICalendarDay, InternalModuleValue } from '@/interfaces';
@@ -15,7 +23,7 @@ export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleV
     // Track hovered date
     const hoveredDate = ref<Date | null>(null);
     // Today date
-    const today = ref<Date>(getDate());
+    const today = ref<Date>(getDate(getZonedDate(new Date(), props.timezone)));
 
     /**
      * When using range picker keep track of hovered value in the calendar

diff --git a/src/VueDatePicker/composables/model.ts b/src/VueDatePicker/composables/model.ts
@@ -1,19 +1,20 @@
 import { computed, ref, reactive } from 'vue';
 import { getHours, getMinutes, getMonth, getYear } from 'date-fns';
 
-import { getDate } from '@/utils/date-utils';
+import { getDate, getZonedDate } from '@/utils/date-utils';
 
 import type { ICalendarData, InternalModuleValue, VueEmit } from '@/interfaces';
 import type { PickerBasePropsType } from '@/props';
 
 export const useModel = (props: PickerBasePropsType, emit: VueEmit) => {
-    const calendars = ref<ICalendarData[]>([{ month: getMonth(getDate()), year: getYear(getDate()) }]);
+    const today = getDate(getZonedDate(new Date(), props.timezone));
+    const calendars = ref<ICalendarData[]>([{ month: getMonth(today), year: getYear(today) }]);
 
     // Time values
 
     const time = reactive({
-        hours: props.range ? [getHours(getDate()), getHours(getDate())] : getHours(getDate()),
-        minutes: props.range ? [getMinutes(getDate()), getMinutes(getDate())] : getMinutes(getDate()),
+        hours: props.range ? [getHours(today), getHours(today)] : getHours(today),
+        minutes: props.range ? [getMinutes(today), getMinutes(today)] : getMinutes(today),
         seconds: props.range ? [0, 0] : 0,
     });