Bonjour à tous,

Me voilà confronté au fameux bug de date lorsque l'on recherche un des jours de semaine (par exemple lundi dans mon cas)...

Dans le code ci-dessous j'obtiens bien le lundi de chaque semaine sur la semaine active mais dès que cela change de mois ou d’année il n'y a plus aucune cohérence et je me retrouve donc avec des entêtes de colonnes d'agenda remplies avec des dates non successives.

J'ai lu dans plusieurs forum que cela était courant et qu'il fallait mettre en place une autre méthode ou bien utiliser moment.js.

Pourriez-vous m'indiquer une fonction ou façon de faire qui rende fiable le calcul des jours au passage du mois / année sans moment.js svp ?

Merci d'avance

export const agendaSemaine = () => {
  //Initialisation du filtre par semaine (Fetch)
  const rechercherParSemaine = async (dateDebutSemaine, dateFinSemaine) => {
    const formData = new FormData();

    //Envoi des dates par formulaire
    formData.append("inputDebutSemaine", dateDebutSemaine);
    formData.append("inputFinSemaine", dateFinSemaine);

    for (let item of formData) {
      console.log(item[0], item[1]);
    }

    const reponse = await fetch("/admin/rendez-vous/agenda-semaine-contenu", {
      method: "POST",
      body: formData,
      cache: "no-cache",
      headers: { "X-Requested-With": "XMLHttpRequest" },
    })
      .then((response) => response.json())
      .then((data) => {
        const contenuSemaine = document.getElementById("contenu-semaine");
        contenuSemaine.innerHTML = data.content;
        obtenirJoursSemaine();     
      })
      .catch((error) => alert("Erreur " + error));

    return reponse;
  };

  //Initialisation avec données de la semaine active 
  const initialiserAgenda = () => {
    const inputDebutSemaine = document.querySelector("#inputDebutSemaine");
    const inputFinSemaine = document.querySelector("#inputFinSemaine");
    const btnAvance = document.querySelector("#btn-avanceSemaine");
    const btnRecul = document.querySelector("#btn-reculSemaine");

    //Recherche des jours de début et fin pour filtre agenda semaine
    const ajd = new Date();
    const dateDebutSemaineDefaut = new Date(
      new Date(ajd).setDate(
        ajd.getDate() - (ajd.getDay() == 0 ? 6 : ajd.getDay() - 1)
      )
    );
    const dateFinSemaineDefaut = new Date(ajd.setDate(ajd.getDate() + 6));

    //Initialisation des champs date début et fin avec les dates de semaine active
    inputDebutSemaine.value = dateDebutSemaineDefaut
      .toISOString()
      .split("T")[0];
    inputFinSemaine.value = dateFinSemaineDefaut.toISOString().split("T")[0];

    //Reculer d'une semaine à l'appui sur bouton
    btnRecul.addEventListener("click", () => {
      semaineAnterieure();
      obtenirJoursSemaine();
      rechercherParSemaine(inputDebutSemaine.value, inputFinSemaine.value);
    });
    //Avancer d'une semaine à l'appui sur bouton
    btnAvance.addEventListener("click", () => {
      semaineSuivante();
      obtenirJoursSemaine();
      rechercherParSemaine(inputDebutSemaine.value, inputFinSemaine.value);
    });

  };
  //Initialiser agenda à l'ouverture de la page
  initialiserAgenda();
  rechercherParSemaine(inputDebutSemaine.value, inputFinSemaine.value);
};

//Créer la liste des colonnes de dates de jours pour la semaine active
const obtenirJoursSemaine = () => {
  const options = { year: "numeric", month: "long", day: "numeric" };
  const titreLundi = document.querySelector(".titre-lundi");
  const titreMardi = document.querySelector(".titre-mardi");
  const titreMercredi = document.querySelector(".titre-mercredi");
  const titreJeudi = document.querySelector(".titre-jeudi");
  const titreVendredi = document.querySelector(".titre-vendredi");
  const titreSamedi = document.querySelector(".titre-samedi");
  const titreDimanche = document.querySelector(".titre-dimanche");

  let dateLundi = new Date(inputDebutSemaine.value);
  titreLundi.textContent =
    "Lundi " + dateLundi.toLocaleDateString("fr-FR", options);

  let dateMardi = new Date();
  dateMardi.setDate(dateLundi.getDate() + 1);
  titreMardi.textContent =
    "Mardi " + dateMardi.toLocaleDateString("fr-FR", options);

  let dateMercredi = new Date();
  dateMercredi.setDate(dateLundi.getDate() + 2);
  titreMercredi.textContent =
    "Mercredi " + dateMercredi.toLocaleDateString("fr-FR", options);

  let dateJeudi = new Date();
  dateJeudi.setDate(dateLundi.getDate() + 3);
  titreJeudi.textContent =
    "Jeudi " + dateJeudi.toLocaleDateString("fr-FR", options);

  let dateVendredi = new Date();
  dateVendredi.setDate(dateLundi.getDate() + 4);
  titreVendredi.textContent =
    "Vendredi " + dateVendredi.toLocaleDateString("fr-FR", options);

  let dateSamedi = new Date();
  dateSamedi.setDate(dateLundi.getDate() + 5);
  titreSamedi.textContent =
    "Samedi " + dateSamedi.toLocaleDateString("fr-FR", options);

  let dateDimanche = new Date();
  dateDimanche.setDate(dateLundi.getDate() + 6);
  titreDimanche.textContent =
    "Dimanche " + dateDimanche.toLocaleDateString("fr-FR", options);
};

const semaineAnterieure = () => {
  //Recul d'une semaine
  let dateDebut = new Date(inputDebutSemaine.value);
  let debutSemaineRecul = new Date(dateDebut.setDate(dateDebut.getDate() - 7));

  let dateFin = new Date(inputFinSemaine.value);
  let finSemaineRecul = new Date(dateFin.setDate(dateFin.getDate() - 7));

  inputDebutSemaine.value = debutSemaineRecul.toISOString().split("T")[0];
  inputFinSemaine.value = finSemaineRecul.toISOString().split("T")[0];

};
const semaineSuivante = () => {
  //Avance d'une semaine
  let dateDebut = new Date(inputDebutSemaine.value);
  let debutSemaineAvance = new Date(dateDebut.setDate(dateDebut.getDate() + 7));

  let dateFin = new Date(inputFinSemaine.value);
  let finSemaineAvance = new Date(dateFin.setDate(dateFin.getDate() + 7));

  inputDebutSemaine.value = debutSemaineAvance.toISOString().split("T")[0];
  inputFinSemaine.value = finSemaineAvance.toISOString().split("T")[0];

};

Aucune réponse