angular - När jag klickar på 'Föregående' eller 'Nästa' på kalendern visas början av månaden med namnet på föregående månad för vissa dagar

Jag arbetar på en kalenderfunktion i en Angular-applikation som visar den aktuella veckan när man navigerar med knapparna "Föregående" och "Nästa". Jag stöter dock på ett problem där månadens namn som visas inte stämmer överens med de faktiska datum som visas i kalendern.

Till exempel:

När man navigerar till den första veckan i januari 2025 (t.ex. 1 till 4 januari), visar kalendern felaktigt "december 2024" som månadsnamn, även om de visade datumen är från januari.

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);
  }
 

Svar #1

Hej, detta är ett resultat jag kunde uppnå som kan hjälpa dig. Jag har använt ett JS-skript för att göra detta. Vänligen låt mig veta om det fungerar bra för dig

 class WeekGenerator {
  constructor() {
    this.currentWeek = [];
    this.selectedDate = new Date();
    this.weekDays = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
    ];
    this.monthNames = [
      "janvier",
      "février",
      "mars",
      "avril",
      "mai",
      "juin",
      "juillet",
      "août",
      "septembre",
      "octobre",
      "novembre",
      "décembre",
    ];
  }

  generateCurrentWeek(day, month, year) {
    const selectedDate = new Date(year, month, day);
    const startOfWeek = this.getStartOfWeek(selectedDate);

    this.currentWeek = [];
    this.updateMonthYearDisplay(startOfWeek);

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

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

    this.displayWeek();
  }

  getStartOfWeek(date) {
    const startOfWeek = new Date(date);
    const dayOfWeek = startOfWeek.getDay();
    const diff = startOfWeek.getDate() - dayOfWeek;
    startOfWeek.setDate(diff);
    return startOfWeek;
  }

  updateMonthYearDisplay(startOfWeek) {
    const lastDayOfWeek = new Date(startOfWeek);
    lastDayOfWeek.setDate(startOfWeek.getDate() + 6);

    const month = lastDayOfWeek.getMonth();
    const year = lastDayOfWeek.getFullYear();

    const monthYearDisplay = document.getElementById("monthYearDisplay");
    monthYearDisplay.textContent = `${this.monthNames[month]} ${year}`;
  }

  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);
    });
  }

  previousWeek() {
    this.selectedDate.setDate(this.selectedDate.getDate() - 7);
    this.updateWeek();
  }

  nextWeek() {
    this.selectedDate.setDate(this.selectedDate.getDate() + 7);
    this.updateWeek();
  }

  updateWeek() {
    this.generateCurrentWeek(
      this.selectedDate.getDate(),
      this.selectedDate.getMonth(),
      this.selectedDate.getFullYear()
    );
  }
}

const weekGenerator = new WeekGenerator();
weekGenerator.generateCurrentWeek(
  weekGenerator.selectedDate.getDate(),
  weekGenerator.selectedDate.getMonth(),
  weekGenerator.selectedDate.getFullYear()
);

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

Svar #2

Anledningen är att den 1 januari 2025 var en onsdag och veckan började faktiskt den 29 december 2024 och överlappade nyårsafton.

Det är upp till dig vad du vill göra i sådana fall. För mig verkar det logiskt att det inte är den första veckan av 2025, utan den sista veckan av 2024 och att den första veckan av 2025 börjar på den första måndagen som faktiskt ligger inom 2025. Du kommer att ha detta beteende för alla månader som inte börjar på en måndag. Om du vill dela upp veckor som överlappar månader, kan du, när du kallar adjustWeek, beräkna datumet du ska subtrahera från, och om det är mindre än 7, då kan du använda det negativa av det aktuella datumet istället för -7. Naturligtvis, i detta fall undvik att hårdkoda 7 eller -7 och använd istället de lämpliga gränserna.