Déclencher un événement à la comparaison de deux dates

Version imprimable

Bonjour,
j'ai un soucis avec mon code javascript.
en effet je veux afficher une alerte après la comparaison de 2 dates, alerte que j'ai stockée dans un DIV de ma page web.
cependant je ne sais quel événement utiliser pour mon traitement vu que j'utilise des datepicker.
je précise que j'utilise JQUERY. merci de votre aide !

CODE :
Code:

1 2 3 4 5 6 7 8 9 10 $(function(){ $('#alertgarant').hide(); var finperiode = $('input[name=fpriod]'); var fingarantie = $('input[name=fgarant]'); $('input[name=fgarant]').click(function(){ if(fingarantie < finperiode){ $('#alertgarant').show(); } }); });

11/10/2016, 18h47
NoSmoking

Bonjour,
j'ai du mal à comprendre ce que tu cherches comme embrouille ;), pourquoi ne pas faire simplement ton test et si il n'est pas satisfaisant alors tu affiches ton message.
11/10/2016, 19h18
saninx

effectivement peut être que mon précédent message ne le dit pas mais tous mes tests n'ont eu aucun succès !

Code:

1 2 3 var finperiode = $('input[name=fpriod]'); var fingarantie = $('input[name=fgarant]');
:koi:

Il faut peut être comparer les values des inputs et pas et pas les objets inputs ?
Code:

1 2 3 var finperiode = $('input[name=fpriod]').val(); var fingarantie = $('input[name=fgarant]').val();

12/10/2016, 10h38
saninx

effectivement avec les valeurs ça paraît plus logique, mais même avec cette modification rien ne fonctionne.
je pense plus du côté de l’événement déclencheur à associer à un datepicker mais je ne sais pas lequel. ça serait peut être ça la solution.

il existe la fonction onSelect dans datepicker, je crois que c'est ce que tu cherches.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$(function() {
  var finperiode, fingarantie;
  $('#alertgarant').hide();
  $("input[type=text]").datepicker({
    dateFormat: "dd-m-yy",
    onSelect: function(dateText, inst) { 
    finperiode = $("input[name=fpriod]").datepicker().val();
    fingarantie = $("input[name=fgarant]").datepicker().val();
    if(finperiode !=""){//si la valeur de fpriod n'est pas vide.
      if (fingarantie < finperiode) {
        $('#alertgarant').show();
      } else {
        $('#alertgarant').hide();
      }
    }
    	console.log(dateText+" fpriod :"+finperiode);
    }
  });
 
});

Bonjour,

+1 pour Toufik83 ;)

sauf qu'il faut parser les dates au bon format :

Code:

1
2
3
4
		var testevent_Date1	= $.datepicker.parseDate('DD dd MM yy', date1);
		var testevent_Date2	= $.datepicker.parseDate('DD dd MM yy', date2);
		if (testevent_Date1>testevent_Date2){
...

A adapter en fonction du format d'affichage.
(ex. Ici) :

Code:

1
2
3
		$("#idevent_Date1").datepicker({ 
			dateFormat: 'DD dd MM yy',// de la forme : Vendredi 27 Janvier 2012 
...

12/10/2016, 14h32
Toufik83

merci pour les formats @jreaux62 ;)

Merci pour ces réponses, mais toujours pareil, dans mon debug j'ai l'erreur suivante :Uncaught TypeError: $(...).datepicker is not a function
code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
    $('#alertgarant').hide();
    var finperiode = $.datepicker.parseDate('DD dd MM yy', $("input[name=fpriod]").datepicker().val());
    var fingarantie = $.datepicker.parseDate('DD dd MM yy', $("input[name=fgarant]").datepicker().val());
    $("input[type=text]").datepicker({
        dateFormat: 'DD dd MM yy',
        onSelect: function(dateText, inst) {
            if(finperiode !=""){//si la valeur de fpriod n'est pas vide.
                if (fingarantie < finperiode) {
                    $('#alertgarant').show();
                } else {
                    $('#alertgarant').hide();
                }
            }
            console.log(dateText+" fpriod :"+finperiode);
        }
    });
 
});

Bonjour,

Il faut mettre les éléments dans le bon ordre... :aie: :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  $('#alertgarant').hide();
 
  $("input[name=fpriod], input[name=fgarant]").datepicker({
 
    dateFormat: 'DD dd MM yy',
    onSelect: function(dateText, inst) {
      var finperiode = $("input[name=fpriod]").val();
      var fingarantie = $("input[name=fgarant]").val();
      $('#alertgarant').hide();
 
      if (finperiode != "" && fingarantie != "") {
        var date_finperiode = $.datepicker.parseDate('DD dd MM yy', finperiode);
        var date_fingarantie = $.datepicker.parseDate('DD dd MM yy', fingarantie);
        if (date_fingarantie < date_finperiode) {
          $('#alertgarant').show();
        }
      }
    }
  });
 
});

bonjour,
l'erreur que tu as dans la console veux dire que la fonction jQuery.datepicker n'existe pas, surement tu n'a pas importé le fichier js (jquery-ui).
ta page doit ressembler a celle là :

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
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script><!-- jQuery !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><!-- le fichier jquery-ui ici !-->
<script>
	$(function() {
  var finperiode, fingarantie;
  $('#alertgarant').hide();
  $("input[type=text]").datepicker({
    dateFormat: /*"dd-m-yy"*/"DD dd MM yy",
    onSelect: function(dateText, inst) { 
    finperiode = $.datepicker.parseDate('DD dd MM yy', $("input[name=fpriod]").datepicker().val());
    fingarantie = $.datepicker.parseDate('DD dd MM yy', $("input[name=fgarant]").datepicker().val());
    if(finperiode !=""){//si la valeur de fpriod n'est pas vide.
      if (fingarantie < finperiode) {
        $('#alertgarant').show();
      } else {
        $('#alertgarant').hide();
      }
    }
    	console.log(dateText+" fpriod :"+finperiode);
    }
  });
 
});
 
</script>
</head>
 
<body>
	<div id="alertgarant">Information sur le garant.</div>
	<div>
    	F_Perdiode :<input type="text" name="fpriod" />
        F_Garant : <input type="text" name="fgarant"/>
    </div>
</body>
</html>

Effectivement je n'ai plus d'erreur dans mon debug , cependant rien ne fonctionne toujours même après des modifications qui m'ont donné le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
    $('#alertgarant').hide();
    var finperiode = $.datepicker.parseDate('dd/mm/YY', $("input[name=fpriod]").datepicker().val());
    var fingarantie = $.datepicker.parseDate('dd/mm/YY', $("input[name=fgarant]").datepicker().val());
    $("input[type=text]").datepicker({
        dateFormat: 'dd/mm/YY',
        onSelect: function(dateText, inst) {
            if(finperiode !=""){//si la valeur de fpriod n'est pas vide.
                if (fingarantie < finperiode) {
                    $('#alertgarant').show();
                } else {
                    $('#alertgarant').hide();
                }
            }
            console.log(dateText+" fpriod :"+finperiode);
        }
    });
 
});

je ne vois pas trop non plus l'utilité du paramètre inst de la function

Code:

onSelect: function(dateText, inst)

19/10/2016, 18h28
NoSmoking

Citation:

Envoyé par saninx

je ne vois pas trop non plus l'utilité du paramètre inst de la function onSelect: function(dateText, inst)

Il serait peut être temps de regarder ce qu'en dit la documentation du plugin !

Finalement j'ai opté pour une autre manière qui sera de rendre impossible de sélectionner une date de garantie inférieur à la date de fin de période comme l'indique le code si dessous.
cependant impossible d'effectuer maintenant un enregistrement avec mon submit, le navigateur tourne sans s’arrêter.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Fonction de comparaison des dates
$(document).ready(function(){
    $("input[name=fpriod]").datepicker({
        dateFormat: 'dd/mm/yy',
        numberOfMonths: 1,
        onSelect: function(selected) {
            $("input[name=fgarant]").datepicker("option","minDate", selected)
        }
    });
    $("input[name=fgarant]").datepicker({
        dateFormat: 'dd/mm/yy',
        numberOfMonths: 1,
        onSelect: function(selected) {
            $("input[name=fpriod]").datepicker("option","maxDate", selected)
        }
    });
});