Controle de dates dans un formulaire

[lilou75019]

Bonjour,
Ne connaissant rien à JS, je me retourne ici.
J'ai un formulaire html dans lequel je dois avoir un contrôle de saisi de date (date de début et date de fin).

Code : Tout sélectionner

<form id="contrat" method="post" action="action.php">
<label for="date_debut">Date de début:</label> <input id="date_debut" type="date" name="date_debut" value="" required>
<label for="date_fin">Date de fin:</label> <input id="date_fin" type="date" name="date_fin" value="" required>
</form>

Visiblement, un JS permettrait de vérifier que la date de fin soit postérieure à la date de début....
l'idéal serait d'empêcher même de sélectionner une date de fin antérieure à la date de début, ce qui se voit souvent sur les sites de réservation...

Merci par avance.

[webmaster]

Bonjour

Voici le principe de fonctionnement avec onchange pour détecter une mise à jour des dates par l'utilistateur

Code : Tout sélectionner

<form id="contrat" name="contrat" method="post" action="action.php">
<label for="date_debut">Date de début:</label> <input id="date_debut" type="date" name="date_debut" value="" required onchange="checkDate()">
<label for="date_fin">Date de fin:</label> <input id="date_fin" type="date" name="date_fin" value="" required onchange="checkDate()">
</form>

<script>
  function checkDate() {
    let date_debut=document.contrat.date_debut.value
    let date_fin=document.contrat.date_fin.value
    console.log(date_debut);
    console.log(date_fin);
    if (date_debut>date_fin) {
      alert("Il faut que date_debut < date_fin");
    }
  }
</script>

Si la date n'est pas saisie, elle vaut "", sinon elle vaut "2021-12-31" ce qui permet de comparer simplement avec > et <