Fonction recherche premier jour semaine retourne résultats farfelus !

**clickandgo** · 16/11/2023, 11h49

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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];
 
};

**ASCIIDEFOND** · 16/11/2023, 17h36

Salut clickandgo,

Voici une fonction qui te donne les jours d'un mois avec son année. Si cela code peut aider ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            user-select: none;
            font-family: monospace;
            box-sizing: border-box;
        }
 
        body {
            overflow-x: hidden;
        }
 
        button {
            width: 150px;
            cursor: pointer;
        }
 
        span,
        button {
            margin: 20px 0 0 20px;
        }
 
        #dates-container {
            display: grid;
            grid-template-columns: repeat(7, 230px);
            row-gap: 20px;
            column-gap: 20px;
            padding: 20px;
            margin: 30px auto;
            width: max-content;
        }
 
        .date-front {
            height: 50px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            text-align: center;
            color: blue;
        }
 
        .date-front p {
            font-size: 1.2em;
        }
    </style>
 
 
</head>
 
<body>
 
    <div id="container">
        <span>Année:</span>
        <select id="select-A">
        </select>
 
        <span>Mois:</span>
        <select id="select-M">
        </select>
 
        <button id="afficher">Afficher</button>
    </div>
    <div id="dates-container"></div>
 
    <script>
        let dateContainer = document.getElementById('dates-container'),
            selectA = document.getElementById('select-A'),
            selectM = document.getElementById('select-M'),
            afficher = document.getElementById('afficher'),
            optionsA = '',
            optionsM = '',
            arrayMois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
            jour, i
 
 
        for (i = 1900; i <= 2050; i += 1) {
            optionsA += `<option>${i}</option>`
        }
        selectA.innerHTML = optionsA
 
        for (i = 0; i <= 11; i += 1) {
            optionsM += `<option value="${i + 1}">${arrayMois[i]}</option>`
        }
        selectM.innerHTML = optionsM
 
 
        function remplissage(annee, mois) {
            let daysInMonth = new Date(annee, mois, 0).getDate(), balises = '', couleur
 
            for (i = 1; i <= daysInMonth; i += 1) {
              
                jour = new Date(`${annee}-${mois}-${i}`).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
              
                jour.search('lundi') == 0 ? couleur = 'red' : couleur = 'inherit'
                balises += `<div class="date-front" data-day="${i}"><p style="color:${couleur};">${jour}</p></div>`
            }
            dateContainer.innerHTML = balises
        }
 
        afficher.addEventListener('click', () => {
            dateContainer.innerHTML = null
            remplissage(selectA.value, selectM.value)
        })
 
    </script>
 
</body>
 
</html>

**NoSmoking** · 16/11/2023, 18h31

Bonjour,

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.

L'utilisation de momentJS n'est pas forcément nécessaire dans ton cas même si cla reste un bon outil.

Il y a trop de duplication de code, tu peux simplifier tout cela, un exemple simple de récupération des éléments de ta semaine.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input type="date" et affichage semaine</title>
<meta name="Author" content="NoSmoking">
<style>
#result {
  display: inline-flex;
  gap: .25em;
  padding: 0;
  text-align: center;
  font-size: .9em;
  list-style: none;
}
#result span {
  display: inline-block;
}
li {
  padding: .25em;
  border: 1px solid #CCC;
}
input {
  font: inherit;
}
</style>
</head>
<body>
<p><input type="date">
<ul id="result"></ul>
<script>
"use strict";
const MS_PER_DAY = 24 * 60 * 60 * 1000;
const DAY_NAMES = "Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi,Dimanche".split(",");
const OPTIONS_DATE = {
  year: "numeric",
  month: "short",
  day: "2-digit",
};
 
function afficheSemaine(d) {
  const dateRef = new Date(d);
  let numDay = dateRef.getDay();
  numDay = numDay || 7;
  let ms = dateRef.getTime() - MS_PER_DAY * (numDay - 1);
 
  const html = [];
  DAY_NAMES.forEach((day) => {
    dateRef.setTime(ms);
    html.push("<li><span>" + day + "</span><br>" + dateRef.toLocaleString("fr-FR", OPTIONS_DATE));
    ms += MS_PER_DAY;
  });
  document.getElementById("result")
    .innerHTML = html.join("");
}
const elemDate = document.querySelector("[type='date']");
elemDate.addEventListener("input", (e) => {
  const elem = e.target;
  afficheSemaine(elem.valueAsDate);
});
// init
const today = new Date();
  elemDate.valueAsNumber = today.getTime();
  afficheSemaine(today);
</script>
</body>
</html>

Si tu n'as pas besoin des valeurs intermédiaires tu peux encore simplifier.

Fonction recherche premier jour semaine retourne résultats farfelus !

JavaScript

Discussions similaires

Partager

Partager