Discussion :

[saninx]

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 :

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

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();
        }
    });
});

[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.

[saninx]

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

[SpaceFrog]

Code :

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

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

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

Code :

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

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

[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.

[Toufik83]

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

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
 
$(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);
    }
  });
 
});

[Invité]

Bonjour,

+1 pour Toufik83

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

Code :

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

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 :

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

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

[Toufik83]

merci pour les formats @jreaux62

[saninx]

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 :

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
$(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);
        }
    });
 
});

[Invité]

Bonjour,

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

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
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();
        }
      }
    }
  });
 
});

[Toufik83]

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 :

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

[saninx]

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 :

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

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

onSelect: function(dateText, inst)

[NoSmoking]

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 !

[saninx]

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 :

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
// 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)
        }
    });
});