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(null); // Today date - const today = ref(getDate()); + const today = ref(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([{ month: getMonth(getDate()), year: getYear(getDate()) }]); + const today = getDate(getZonedDate(new Date(), props.timezone)); + const calendars = ref([{ 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, });