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);
|
return this.currentDate.toLocaleDateString(this.$i18n.locale, options);
|
||||||
},
|
},
|
||||||
currentDateStr() {
|
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() {
|
monthDays() {
|
||||||
const year = this.currentDate.getFullYear();
|
const year = this.currentDate.getFullYear();
|
||||||
@@ -372,8 +377,10 @@ export default {
|
|||||||
date.setDate(startDate.getDate() + i);
|
date.setDate(startDate.getDate() + i);
|
||||||
const dayOfWeekNum = date.getDay();
|
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({
|
days.push({
|
||||||
date: date.toISOString().split('T')[0],
|
date: dateStr,
|
||||||
dayNumber: date.getDate(),
|
dayNumber: date.getDate(),
|
||||||
currentMonth: date.getMonth() === month,
|
currentMonth: date.getMonth() === month,
|
||||||
isToday: date.getTime() === today.getTime(),
|
isToday: date.getTime() === today.getTime(),
|
||||||
@@ -395,8 +402,10 @@ export default {
|
|||||||
date.setDate(monday.getDate() + i);
|
date.setDate(monday.getDate() + i);
|
||||||
const dayOfWeek = date.getDay();
|
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({
|
days.push({
|
||||||
date: date.toISOString().split('T')[0],
|
date: dateStr,
|
||||||
dayNumber: date.getDate(),
|
dayNumber: date.getDate(),
|
||||||
weekday: this.weekDays[i],
|
weekday: this.weekDays[i],
|
||||||
isToday: date.getTime() === today.getTime(),
|
isToday: date.getTime() === today.getTime(),
|
||||||
@@ -414,8 +423,10 @@ export default {
|
|||||||
const dayIndex = date.getDay();
|
const dayIndex = date.getDay();
|
||||||
const weekdayIndex = dayIndex === 0 ? 6 : dayIndex - 1;
|
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 {
|
return {
|
||||||
date: date.toISOString().split('T')[0],
|
date: dateStr,
|
||||||
dayNumber: date.getDate(),
|
dayNumber: date.getDate(),
|
||||||
month: this.getMonthKey(date.getMonth()),
|
month: this.getMonthKey(date.getMonth()),
|
||||||
year: date.getFullYear(),
|
year: date.getFullYear(),
|
||||||
@@ -445,6 +456,13 @@ export default {
|
|||||||
const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
|
const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
|
||||||
return months[monthIndex];
|
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() {
|
navigatePrev() {
|
||||||
const newDate = new Date(this.currentDate);
|
const newDate = new Date(this.currentDate);
|
||||||
switch (this.currentView) {
|
switch (this.currentView) {
|
||||||
@@ -540,7 +558,7 @@ export default {
|
|||||||
this.selectedDates = [];
|
this.selectedDates = [];
|
||||||
const current = new Date(start);
|
const current = new Date(start);
|
||||||
while (current <= end) {
|
while (current <= end) {
|
||||||
this.selectedDates.push(current.toISOString().split('T')[0]);
|
this.selectedDates.push(this.formatDateLocal(current));
|
||||||
current.setDate(current.getDate() + 1);
|
current.setDate(current.getDate() + 1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -601,7 +619,7 @@ export default {
|
|||||||
// Dialog methods
|
// Dialog methods
|
||||||
openNewEventDialog(dateStr = null, hour = null, endDateStr = null) {
|
openNewEventDialog(dateStr = null, hour = null, endDateStr = null) {
|
||||||
this.editingEvent = null;
|
this.editingEvent = null;
|
||||||
const today = new Date().toISOString().split('T')[0];
|
const today = this.formatDateLocal(new Date());
|
||||||
|
|
||||||
this.eventForm = {
|
this.eventForm = {
|
||||||
title: '',
|
title: '',
|
||||||
|
|||||||
Reference in New Issue
Block a user