Controle de dates dans un formulaire

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
lilou75019
Messages : 1
Enregistré le : 28 oct. 2021, 06:35

Controle de dates dans un formulaire

Message par lilou75019 » 28 oct. 2021, 06:39

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.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Controle de dates dans un formulaire

Message par webmaster » 28 oct. 2021, 14:27

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 <
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre