Discussion :

[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 html :

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

1
2
3
4
<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.

[SpaceFrog]

Il existe des "date pickers" paramétrables avec tes restrictions de saisie ...

[Lilou75019]

Merci de l'indication.
Sur un autre forum, j'ai trouvé cette solution qui fonctionne très bien.

Code :

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

1
2
3
4
5
6
7
8
9
10
const dateDebut = document.querySelector('#date_debut');
const dateFin = document.querySelector('#date_fin');
dateDebut.addEventListener('change', () => {
    if(dateFin.valueAsNumber < dateDebut.valueAsNumber) // Si la date de début est supérieur à celle de fin :
        dateFin.value = null; // On vide le champ date_fin
    if(dateDebut.value) // S'il y a bien une valeur dans date_debut :
        dateFin.min = dateDebut.value; // On défini la date minimum de date_fin à celle de date_debut
    else // Sinon :
        dateFin.min = null; // On retire cette limite minimum
});

je la partage ici, cela peut servir à d'autres.
Merci.