Discussion :

[sohaibADJ]

salut j’espère que vous allez bien

bon. mon problème c'est le contrôle de DATE qui vient de calendrier d'un navigateur ( exemple le calendrier défaut de chrome ) après la saisie d'une date à partir de ce calendrier , ce dernier est de type mm/jj/aaaa
mais la donnée que je trouve sur la base de donnée après la saisie est de type aaaa/mm/jj
voici le code de mon formulaire html :

Code HTML :

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

1
2
3
4
<form  name=formu action="ajouter_semestre.php"  method="POST">  
<input type="date" placeholder="date debut semestre" value="<?php if (isset($_POST['date_debut_sem'])){echo $_POST['date_debut_sem'];} ?>" maxlength="10" name="date_debut_sem" id="date_debut_sem" class="calendrier" required onClick="ds_sh(this);"><br>
<input type="date" placeholder="date  Fin du semestre" value="<?php if (isset($_POST['date_fin_sem'])){echo $_POST['date_fin_sem'];} ?>" maxlength="10" name="date_fin_sem" id="date_fin_sem" class="calendrier" onClick="ds_sh(this);" required><br>
</form>

et voici mon script js contrôleur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script> 
 with(document.formu) {
    onsubmit = function() {
     tabdeb = (date_debut_sem.value.split(/[- //]/));
    tabfin = (date_fin_sem.value.split(/[- //]/));
    Odeb = new Date(tabdeb[2],tabdeb[1],tabdeb[0]);
    Ofin = new Date(tabfin[2],tabfin[1],tabfin[0]);
    if(Odeb > Ofin) {
    alert('date fin du semestre doit etre superieure a la date du debut')
        date_debut_sem.focus(); date_fin_sem.style.backgroundColor='#F00';
        return false };};};
</script>

Vu que il vérifier bien les dates de la même année ( exemple : date de début -> 12 juillet 2020 et date de fin -> 31 décembre 202 , MAIS quant il s'agit de deux an différents comme ( date de début -> 02 février 2020 et date de fin -> 04 juillet 2021 ) il affiche le message alert !
MERCI si vous avez lu jusqu'à ici

[NoSmoking]

Bonjour,
il te faut utiliser la propriété valueAsDate des <input type="date"> pour faire ta comparaison.

Code :

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

1
2
3
if( inputDeb.valueAsDate > inputFin.valueAsDate) {
  // date fin inférieure
}

Nota : oublie vite cette notation avec le width source de confusion,

Code :

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

with(document.formu) {

c'est bien plus clair d'affecter directement une variable

Code :

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

cosnt oForm = document.formu;

ou même dans ton cas de s'en passer

Code :

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

1
2
3
document.formu.addEventListener("submit", function(e) {
  const oForm = e.target;
});

[sohaibADJ]

merci ta réponse
vu que je suis débutant j'ai pas bien pigé tes scripte! j'ai essayé mais pas moyen, mon but c'est de trouvé un moyen pour contrôler la date début et fin, après une petite recherche j'ai trouvé une solution mais avec la technologie jquery et jquery-ui ( user interface )
alors j'ai ajouter ces lien CDN dans le <header>:

Code HTML :

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

1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

puis j'ai supprimer totalement l’attribut type="date" pour ne pas déclencher le calendrier par défaut des navigateur , j'ai ajouter l'attribut readonly="readonly" pour que l'utilisateur ne pourra pas saisir manuellement

voici mon formulaire :

Code HTML :

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

1
2
3
<form  name=formu action="ajouter_semestre.php"  method="POST">
<input readonly="readonly" placeholder="date debut semestre" value="<?php if (isset($_POST['date_debut_sem'])){echo $_POST['date_debut_sem'];} ?>" maxlength="10" name="date_debut_sem" id="txtFrom" class="calendrier" required><br>
<input readonly="readonly" placeholder="date  Fin du semestre" value="<?php if (isset($_POST['date_fin_sem'])){echo $_POST['date_fin_sem'];} ?>" maxlength="10" name="date_fin_sem" id="txtTo" class="calendrier" required><br>

enfin le script jquery est comme suit :

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
<!-- script jQuery qui vérifier que la date de fin est supérieur à la date de début -->
<script>
$(function() {
  $("#txtFrom").datepicker({
    numberOfMonths: 1,
    dateFormat: 'yy/mm/dd',
    onSelect: function(selectdate) {
      var dt = new Date(selectdate);
      dt.setDate(dt.getDate() + 1)
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    dateFormat: 'yy/mm/dd',
    onSelect: function(selectdate) {
      var dt = new Date(selectdate);
      dt.setDate(dt.getDate() - 1)
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });
});
</script>

chère lecture faite attention au format de date
Merci