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).
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.

Salut,

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
});

Bonjour,

Un grand merci.

Cette solution fonctionne très bien quand on sélectionne sur le petit calandrier.

En revanche, on peut contourner le problème en remplissant le champ avec le clavier. Et là, il n'y a pas de contrôle.

Oui c'est vrai, tu peux toujours écrire une valeur interdite, mais normalement tu ne peux pas valider le formulaire si la condition n'est pas respecté.

Ajoute un input[type="submit"] pour t'en rendre compte.

Sinon, tu peux aussi tester la validité du remplissage d'un champ grâce à la méthode .checkValidity():

console.log(dateFin.checkValidity());
/**
 * Renvoi true si le champ est valide
 * False s'il ne l'est pas...
 **/

-
Edité par BrainError 28 octobre 2021 à 13:41:26

ça fonctionne très très bien il est vrai avec la validation du questionnaire.

Un grand merci pour le temps passé pour me donner un coup de main. quand on est un informaticien du dimanche comme je suis, cela est très appréciable.

Merci beaucoup.