Refactor date handling in CalendarView: Update date formatting to use local timezone instead of UTC, enhancing accuracy in date representation. Introduce a new helper method for consistent date formatting across the component. This change improves the overall user experience by ensuring dates are displayed correctly.
This commit is contained in:
@@ -351,7 +351,12 @@ export default {
|
||||
return this.currentDate.toLocaleDateString(this.$i18n.locale, options);
|
||||
},
|
||||
currentDateStr() {
|
||||
return this.currentDate.toISOString().split('T')[0];
|
||||
// Local timezone formatting to avoid UTC conversion issues
|
||||
const d = this.currentDate;
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
monthDays() {
|
||||
const year = this.currentDate.getFullYear();
|
||||
@@ -372,8 +377,10 @@ export default {
|
||||
date.setDate(startDate.getDate() + i);
|
||||
const dayOfWeekNum = date.getDay();
|
||||
|
||||
// Local timezone formatting
|
||||
const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
days.push({
|
||||
date: date.toISOString().split('T')[0],
|
||||
date: dateStr,
|
||||
dayNumber: date.getDate(),
|
||||
currentMonth: date.getMonth() === month,
|
||||
isToday: date.getTime() === today.getTime(),
|
||||
@@ -395,8 +402,10 @@ export default {
|
||||
date.setDate(monday.getDate() + i);
|
||||
const dayOfWeek = date.getDay();
|
||||
|
||||
// Local timezone formatting
|
||||
const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
days.push({
|
||||
date: date.toISOString().split('T')[0],
|
||||
date: dateStr,
|
||||
dayNumber: date.getDate(),
|
||||
weekday: this.weekDays[i],
|
||||
isToday: date.getTime() === today.getTime(),
|
||||
@@ -414,8 +423,10 @@ export default {
|
||||
const dayIndex = date.getDay();
|
||||
const weekdayIndex = dayIndex === 0 ? 6 : dayIndex - 1;
|
||||
|
||||
// Local timezone formatting
|
||||
const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
return {
|
||||
date: date.toISOString().split('T')[0],
|
||||
date: dateStr,
|
||||
dayNumber: date.getDate(),
|
||||
month: this.getMonthKey(date.getMonth()),
|
||||
year: date.getFullYear(),
|
||||
@@ -445,6 +456,13 @@ export default {
|
||||
const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
|
||||
return months[monthIndex];
|
||||
},
|
||||
// Helper: Format date as YYYY-MM-DD in local timezone (not UTC!)
|
||||
formatDateLocal(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
navigatePrev() {
|
||||
const newDate = new Date(this.currentDate);
|
||||
switch (this.currentView) {
|
||||
@@ -540,7 +558,7 @@ export default {
|
||||
this.selectedDates = [];
|
||||
const current = new Date(start);
|
||||
while (current <= end) {
|
||||
this.selectedDates.push(current.toISOString().split('T')[0]);
|
||||
this.selectedDates.push(this.formatDateLocal(current));
|
||||
current.setDate(current.getDate() + 1);
|
||||
}
|
||||
},
|
||||
@@ -601,7 +619,7 @@ export default {
|
||||
// Dialog methods
|
||||
openNewEventDialog(dateStr = null, hour = null, endDateStr = null) {
|
||||
this.editingEvent = null;
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const today = this.formatDateLocal(new Date());
|
||||
|
||||
this.eventForm = {
|
||||
title: '',
|
||||
|
||||
Reference in New Issue
Block a user