From f023638fa12b9fdcc2fbbfc4eda3607ea504b5ea Mon Sep 17 00:00:00 2001
From: Jasenko Karovic <karovicm995@gmail.com>
Date: Tue, 19 Sep 2023 19:56:09 +0200
Subject: [PATCH] fix: Wrong `today` and initial time when `timezone` is set
 (fixes #579)

---
 src/VueDatePicker/composables/calendar-class.ts | 12 ++++++++++--
 src/VueDatePicker/composables/model.ts          |  9 +++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/VueDatePicker/composables/calendar-class.ts b/src/VueDatePicker/composables/calendar-class.ts
index ad8c979a1..adb818615 100644
--- 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
index d08453472..88e0e9115 100644
--- 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,
     });