Date HTML : value, min, max, step et format de date
HTML <input type="date"> fournit un contrôle pour une année, un mois et un jour. Son apparence de calendrier et l'ordre affiché peuvent varier selon le navigateur et la langue, mais la valeur et les valeurs soumises sont normalisées en YYYY-MM-DD. Elles n'incluent pas d'heure ni de fuseau horaire.
Définir une date initiale et la plage autorisée
Utilisez value pour la date initiale et min/max pour les dates les plus anciennes et les plus récentes autorisées. Les deux limites sont incluses. Les attributs nécessitent des chaînes de date valides plutôt que le texte d'affichage localisé tel que « 20 mai 2030 ». Des valeurs min ou max invalides peuvent ne pas imposer la restriction prévue.
name est le nom du champ soumis et id associe l'étiquette. Utilisez required pour la saisie obligatoire. Une plage ne fait pas que tous les navigateurs empêchent la saisie de dates de la même manière; une date hors plage saisie directement échoue à la validation de la contrainte.
Exemple complet : inspectez la chaîne de date et la validité
Enregistrez le document suivant sous le nom date-demo.html et ouvrez-le dans un navigateur. Il affiche une date choisie au cours du mois de mai 2030 pour s'exercer, sans effectuer de réservation ni envoyer de données à un serveur.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vérifier les valeurs de date</title>
</head>
<body>
<h1>Exercice de date de visite</h1>
<form id="demo">
<label for="visit">Date de visite (mai 2030, obligatoire)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Afficher la valeur</button>
<button type="reset">Réinitialiser</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Soumettez la date initiale pour afficher :
visit = 2030-05-20 - Choisissez une autre date en mai et soumettez pour afficher sa chaîne de date. Une date en dehors de cette plage est bloquée par la validation min/max.
- Effacez la date et soumettez : la validation obligatoire la bloque. Réinitialiser revient au 20 mai.
L'unité step est en jours et sa valeur par défaut est 1. Changez uniquement le pas à 7 dans l'exemple : le 1er mai, la date minimum, devient la base, donc le 1er, 8, 15, 22 et 29 mai correspondent à l'intervalle. La valeur initiale du 20 mai ne correspond plus. Comparez une sélection valide du 8 mai, puis rétablissez le pas à 1 pour permettre chaque jour. Un paramètre de pas unique n'implémente pas un calendrier commercial avec week-ends ou jours fériés.
Formats d'affichage, fuseaux horaires et validation côté serveur
Ne mettez pas de barres obliques ou de chaînes localisées dans la valeur pour changer le sélecteur de date spécifique à la localisation. Si vous avez seulement besoin d'une date du calendrier, la traiter comme une chaîne évite des conversions de fuseau horaire inutiles. Les données nécessitant également une heure nécessitent plus que la seule date et une politique de fuseau horaire distincte.
Contrôlez la largeur avec le CSS plutôt qu'avec un attribut de taille. Fournissez une étiquette et une explication de la plage, et validez les dates réelles, les années bissextiles, les plages et la disponibilité selon les règles métier sur le serveur pour les contrôles non pris en charge ou les demandes contournant les vérifications du navigateur. Sélectionner une date ne réserve pas de place ni ne confirme la disponibilité actuelle des places. La référence de saisie de date MDN explique les règles des attributs.
