Contrôle sur DATE de fin et de début

Version imprimable

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:

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:

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

20/10/2020, 11h19
NoSmoking
Bonjour,
il te faut utiliser la propriété valueAsDate des <input type="date"> pour faire ta comparaison.
Code:

1 2 3 if( inputDeb.valueAsDate > inputFin.valueAsDate) { // date fin inférieure }
Nota : oublie vite cette notation avec le width source de confusion,

Code:

with(document.formu) {

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

Code:

cosnt oForm = document.formu;

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

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

j'ai utilisé jquey et jquery-ui :?

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:

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:

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:

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