当我在日历上单击“上一个”或“下一个”时，月初会显示上个月某天的名称

Question

我正在 Angular 应用程序中开发日历功能，该功能在使用“上一页”和“下一页”按钮导航时显示当前星期。但是，我遇到了一个问题，即显示的月份名称与日历中显示的实际日期不正确对齐。

例如：

导航到 2025 年 1 月的第一周（例如 1 月 1 日至 4 日）时，日历错误地将“2024 年 12 月”显示为月份名称，即使显示的日期是 1 月。

generateCurrentWeek(day: number, month: number, year: number): void {
    const selectedDate = new Date(year, month, day);
  
    // Ensure the selected date is consistent and not mutated
    const startOfWeek = new Date(selectedDate);
    startOfWeek.setDate(selectedDate.getDate() - selectedDate.getDay()); // Get the start of the week (Sunday)
  
    this.currentWeek = [];
    this.SelectedDateList = [];
  
    // Generate all 7 days of the week
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(startOfWeek);
      currentDate.setDate(startOfWeek.getDate() + i);
  
      // Format the date as YYYY-MM-DD
      const formattedDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1)
        .toString()
        .padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
  
      this.currentWeek.push({
        date: currentDate.getDate(),
        day: this.weekDays[currentDate.getDay()],
      });
  
      this.SelectedDateList.push({ date: formattedDate });
    }
  
    console.log('Current Week:', this.currentWeek);
  }
  
  previousWeek(): void {
    this.adjustWeek(-7);
  }
  
  nextWeek(): void {
    this.adjustWeek(7);
  }
  
  private adjustWeek(offsetDays: number): void {
    // Use the first day of the current week for calculations
    const firstDayOfCurrentWeek = new Date(
      this.selectedYear,
      this.selectedMonth,
      this.selectedDay
    );
  
    // Adjust by offsetDays
    firstDayOfCurrentWeek.setDate(firstDayOfCurrentWeek.getDate() + offsetDays);
  
    // Update selected date
    this.selectedYear = firstDayOfCurrentWeek.getFullYear();
    this.selectedMonth = firstDayOfCurrentWeek.getMonth();
    this.selectedDay = firstDayOfCurrentWeek.getDate();
  
    // Regenerate the week and fetch the employee list
    this.generateCurrentWeek(this.selectedDay, this.selectedMonth, this.selectedYear);
    this.GetEmployeeList(this.MainUserID);
  }
 

Answer 1

您好，这是我可以实现的结果，可以帮助您。我使用了 js 脚本来实现这个。请告诉我它是否适合您

class WeekGenerator {
 constructor() {
this.currentWeek = [];
this.SelectedDateList = [];
this.selectedYear = new Date().getFullYear();
this.selectedMonth = new Date().getMonth();
this.selectedDay = new Date().getDate();
this.weekDays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
this.monthNames = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];
}

generateCurrentWeek(day, month, year) {
const selectedDate = new Date(year, month, day);

const startOfWeek = new Date(selectedDate);
startOfWeek.setDate(selectedDate.getDate() - selectedDate.getDay());

this.currentWeek = [];
this.SelectedDateList = [];

for (let i = 0; i < 7; i++) {
  const currentDate = new Date(startOfWeek);
  currentDate.setDate(startOfWeek.getDate() + i);

  const formattedDate = `${currentDate.getFullYear()}-${(
    currentDate.getMonth() + 1
  )
    .toString()
    .padStart(2, "0")}-${currentDate
    .getDate()
    .toString()
    .padStart(2, "0")}`;

  this.currentWeek.push({
    date: currentDate.getDate(),
    day: this.weekDays[currentDate.getDay()],
    month: this.monthNames[currentDate.getMonth()],
    year: currentDate.getFullYear(),
  });

  this.SelectedDateList.push({ date: formattedDate });
  }

  this.displayWeek();
  }

   previousWeek() {
     this.adjustWeek(-7);
   }

nextWeek() {
  this.adjustWeek(7);
}

adjustWeek(offsetDays) {
  const firstDayOfCurrentWeek = new Date(
    this.selectedYear,
    this.selectedMonth,
    this.selectedDay
  );

firstDayOfCurrentWeek.setDate(firstDayOfCurrentWeek.getDate() + 
offsetDays);

this.selectedYear = firstDayOfCurrentWeek.getFullYear();
this.selectedMonth = firstDayOfCurrentWeek.getMonth();
this.selectedDay = firstDayOfCurrentWeek.getDate();

this.generateCurrentWeek(
  this.selectedDay,
  this.selectedMonth,
  this.selectedYear
  );
}

displayWeek() {
  const weekDisplay = document.getElementById("weekDisplay");
  weekDisplay.innerHTML = "";

this.currentWeek.forEach((dayInfo) => {
  const li = document.createElement("li");
  li.textContent = `${dayInfo.day}, ${dayInfo.date} ${dayInfo.month} 
   ${dayInfo.year}`;
    weekDisplay.appendChild(li);
      });
  }
}

 const weekGenerator = new WeekGenerator();
   weekGenerator.generateCurrentWeek(
   weekGenerator.selectedDay,
   weekGenerator.selectedMonth,
   weekGenerator.selectedYear
 );

 document
   .getElementById("prevWeekBtn")
   .addEventListener("click", () => weekGenerator.previousWeek());
 document
   .getElementById("nextWeekBtn")
   .addEventListener("click", () => weekGenerator.nextWeek());