Sélectionner une série de checkbox en fonction d'une date

Version imprimable

Bonjour à tous,

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

Code:

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:

<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:

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:

<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:

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

Bonjour,

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

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.

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:

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:

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

mais de cette manière

Code:

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

Mais pourquoi utilises-tu let?

Merci

13/03/2022, 23h23
Toufik83

Bonjour,

Citation:

Envoyé par pierrot10

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.