Discussion :

[pierrot10]

Bonjour à tous,

J'ai fais un script qui ba m'afficher des mesures en fonction d'une plage de date

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
 
<form method="GET" name="del_collection">
	<ul class="ul-level-1">
		<li class="li-level-1">
			<input type="checkbox" data-date="2022-03-11 14:49:26" name="del_collection[]" value="235990">
			<b>id_collection: 235990</b>, 2022-03-11 14:49:26, A34, , 0, 0.0 Hrz, LORA, 21
			<ul class="ul-level-2">
				<li class="li-level-2">[834054] A4: 16.9000</li>
				<li class="li-level-2">[834053] A3: 16.0000</li>
				<li class="li-level-2">[834052] Batterie: 4.0700</li>
			</ul>
		</li>
		<li class="li-level-1">
			<input type="checkbox" data-date="2022-03-11 15:06:48" name="del_collection[]" value="236000">
			<b>id_collection: 236000</b>, 2022-03-11 15:06:48, A34, , 0, 0.0 Hrz, LORA, 21
			<ul class="ul-level-2">
				<li class="li-level-2">[834089] A4: 16.5000</li>
				<li class="li-level-2">[834088] A3: 15.4000</li>
				<li class="li-level-2">[834087] Batterie: 4.0700</li>
			</ul>
		</li>
		<li class="li-level-1">
			<input type="checkbox" data-date="2022-03-11 15:24:17" name="del_collection[]" value="236009">
			<b>id_collection: 236009</b>, 2022-03-11 15:24:17, A34, , 0, 0.0 Hrz, LORA, 21
			<ul class="ul-level-2">
				<li class="li-level-2">[834123] A4: 15.8000</li>
				<li class="li-level-2">[834122] A3: 14.5000</li>
				<li class="li-level-2">[834121] Batterie: 4.0700</li>
			</ul>
		</li>
		<li class="li-level-1">
			<input type="checkbox" data-date="2022-03-11 15:41:46" name="del_collection[]" value="236017">
			<b>id_collection: 236017</b>, 2022-03-11 15:41:46, A34, , 0, 0.0 Hrz, LORA, 21
			<ul class="ul-level-2">
				<li class="li-level-2">[834154] A4: 14.1000</li>
				<li class="li-level-2">[834153] A3: 14.0000</li>
				<li class="li-level-2">[834152] Batterie: 4.0700</li>
			</ul>
		</li><
	</ul>
	<input type="submit" value="Submit">
</form>

Observez le input

Code HtmL :

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

<input type="checkbox" data-date="2022-03-11 15:41:46" name="del_collection[]" value="236017">

il y a le paramètre data-date.

Je veux supprimer des mesures qui se trouve entre le 2022-03-11 15:06:48 et le 2022-03-11 15:24:17.
J'ai fais un autre formulaire qui va me permettre de définir cette plage de date

Code HTML :

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

1
2
3
4
5
6
 
    <form id="ddate">
      <input type="text" class="date-change" id="ddate-from" name="ddate-from" placeholder="de"> <!-- 2022-03-11 15:06:48 -->
      <input type="text" id="ddate-to" class="date-change" name="ddate-to" placeholder="jusqu'à"> <!-- 2022-03-11 15:24:17 -->
    </form>
<button id="selectDate" value="Apply">Aply</button>

En cliquant sur apply, j'aimerais que tous les inputs de type checkbox, qui se trouvent entre le 2022-03-11 15:06:48 et le 2022-03-11 15:24:17 soient cochés

Puis le input

Code HTML :

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

<input type="submit" value="Submit">

se trouvant dans mon premier formulaire va effacer ces mesures (ceci fontionne déjà).

J'aimerais donc ajouter la possiblité d'effacer en série de mesure en fonction d'une date de départ et une date de fin.

Coté jquery, j'ai fais ceci

Code JQUERY :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
  $(document).ready(function(){
 
    $("#selectDate").on('click',function() {
      var date = $("#ddate").serialize();
 
      console.log("from",date);
    });
 
  });
</script>

C'est pas beaucoup, mais je ne sais pas comment parcourir tous mes input et comparer le contenu de data-date, et coché le checkbox si la date de data-date est entre ou égal aux date de départ et de fin.

Je vous remercie pour vos lumières

[Toufik83]

Bonjour,

C'est assez simple, il faut utiliser une boucle pour parcourir les checkbox puis utiliser la classe Date() (optionnel):

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$('#selectDate').click(()=>{
  let dateDebut = new Date($("#ddate-from").val()),
    dateFin = new Date($("#ddate-to").val()),cDate;
  $(':checkbox').each((i, checkbox) => {
    cDate = new Date($(checkbox).attr('data-date'));
    if (cDate >= dateDebut && cDate <= dateFin)
      $(checkbox).prop('checked', true);
  });
});

Remarque :

L'utilisation de la classe Date est optionnelle pour ce cas, le script fonctionnera toujours si tu la supprimes..., sauf qu'il vaut mieux t'assurer que les valeurs comparées représentent bien une date valide.

[pierrot10]

Hello
Merci pour ta réponse.
J'ai ausis réussi à le faire de manière moins propre que toi.
J'ai donc améliorer mon code de cette manière

Code JQUERY :

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
 $("#selectDate").on('click',function() {
      //var ddate_from = $("#ddate-from").val();
      //var ddate_to = $("#ddate-to").val();
 
      let ddate_from = new Date($("#ddate-from").val()), ddate_to = new Date($("#ddate-to").val()),cDate;
 
      //console.log(ddate_from);
      //console.log(ddate_to);
 
      $("li.li-level-1 input:checkbox").each((i, checkbox) => {
        cDate = new Date($(checkbox).attr('data-date'));
        if (cDate >= ddate_from && cDate <= ddate_to){
          $(checkbox).prop('checked', true);
        }
        else
        {
          $(checkbox).prop('checked', false);
        }
      });
 
    });

Je ne déclarais pas ma variable date de cette manière

Code JQUERY :

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

 let ddate_from = new Date($("#ddate-from").val()), ddate_to = new Date($("#ddate-to").val()),cDate;

mais de cette manière

Code JQUERY :

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

 var ddate_from = $("#ddate-from").val();

Mais pourquoi utilises-tu let?

Merci

[Toufik83]

Bonjour,

Mais pourquoi utilises-tu let?

Seulement parce qu'on a pas vraiment besoin d'utiliser var, c'est presque la même chose, sauf que les variables précédées par let ne sont reconnues que dans le contexte (function()) où elles ont été déclarées.