Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2021.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Les éléments <input> de type="date" créent des champs de saisie permettant à l'utilisateur·ice d'entrer une date. L'apparence de l'interface du sélecteur de date varie selon le navigateur et le système d'exploitation. La valeur est normalisée au format yyyy-mm-dd.
La valeur obtenue inclut l'année, le mois et le jour, mais pas l'heure. Les types de champ time et datetime-local permettent de saisir respectivement une heure ou une date et une heure.
Une chaîne de caractères représentant la date saisie dans le champ. La date est formatée selon le format des chaînes de date.
Vous pouvez définir une valeur par défaut pour le champ en indiquant une date dans l'attribut value :
Note : Le format de la date affichée diffère de la valeur réelle de l'attribut value — la date affichée est formatée selon la langue du navigateur de l'utilisateur·ice, mais la valeur analysée est toujours au format yyyy-mm-dd.
Vous pouvez obtenir et définir la valeur de la date en JavaScript avec les propriétés value et valueAsNumber de HTMLInputElement. Par exemple :
Ce code recherche le premier élément <input> dont le type est date, et définit sa valeur à 2017-06-01 (le 1er juin 2017). Il lit ensuite cette valeur sous forme de chaîne de caractères et sous forme numérique.
En plus des attributs universels et des attributs de champs communs à tous les éléments <input>, le champ de saisie de type date prend en charge les attributs suivants :
La date la plus avancée qui peut être saisie. Si la value entrée dans l'élément est postérieure, l'élément ne respecte pas les contraintes de validation. Si la valeur de l'attribut max n'est pas une chaîne de caractères de date possible au format yyyy-mm-dd, alors l'élément n'a pas de valeur maximale.
Si les attributs max et min sont tous les deux définis, cette valeur doit être une chaîne de caractères de date postérieure ou égale à celle de l'attribut min.
La date la plus ancienne qui peut être saisie. Si la value entrée dans l'élément est antérieure, l'élément ne respecte pas les contraintes de validation. Si la valeur de l'attribut min n'est pas une chaîne de caractères de date possible au format yyyy-mm-dd, alors l'élément n'a pas de valeur minimale.
Si les attributs max et min sont tous les deux définis, cette valeur doit être une chaîne de caractères de date antérieure ou égale à celle de l'attribut max.
L'attribut step est un nombre qui définit la granularité à laquelle la valeur doit se conformer, ou la valeur spéciale any, qui est décrite ci-dessous. Seules les valeurs qui sont un nombre entier de pas à partir de la base de pas sont valides. La base de pas est min si elle est définie, value sinon, ou 0 (l'époque Unix, 1970-01-01) si aucune n'est fournie.
Pour les champs de type date, la valeur de step est donnée en jours et est traitée comme un nombre de millisecondes égal à 86 400 000 fois la valeur de step (la valeur numérique sous-jacente est en millisecondes). La valeur par défaut est 1, ce qui indique 1 jour.
Une valeur de chaîne de caractères any signifie qu'aucun pas n'est impliqué, et que n'importe quelle valeur est autorisée (sous réserve d'autres contraintes, telles que min et max). En réalité, cela a le même effet que 1 pour les champs de type date car l'interface du sélecteur ne permet de sélectionner que des jours entiers.
Note : Lorsque la donnée saisie par l'utilisateur·ice ne respecte pas la configuration du pas, le agent utilisateur peut arrondir à la valeur valide la plus proche, en privilégiant les nombres dans le sens positif lorsqu'il y a deux options aussi proches.
Les champs de saisie de date offrent une interface simple pour choisir des dates et normalisent le format des données envoyées au serveur, quelle que soit la langue de l'utilisateur·ice.
Dans cette section, nous allons examiner des utilisations simples puis plus complexes de <input type="date">.
Dans son expression la plus simple <input type="date"> s'utilise avec un élément <input> et un élément <label> :
Ce fragment de HTML envoie la date saisie avec la clé bday vers https://example.com, ce qui donne une URL résultante comme https://example.com/?bday=1955-06-08.
On peut utiliser les attributs min et max afin de restreindre les dates qui peuvent être saisies par l'utilisateur·ice. Dans l'exemple suivant, on indique une date minimum au premier avril 2017 (2017-04-01) et une date maximale au 30 avril 2017 (2017-04-30) :
On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années.
Vous pouvez utiliser l'attribut step pour faire varier le nombre de jours sautés à chaque incrémentation de la date (par exemple, pour ne rendre sélectionnables que les samedis).
<input type="date"> ne permet pas d'utiliser des attributs de dimensionnement tels que size. Il est nécessaire d'utiliser CSS pour gérer ces aspects de mise en forme.
Par défaut, <input type="date"> ne valide pas la valeur saisie au-delà de son format. Les interfaces ne permettent généralement pas de saisir autre chose qu'une date — ce qui est utile.
Si vous utilisez min et max pour restreindre les dates disponibles (voir Paramétrer une date maximale et une date minimale), le contrôle du formulaire désactive les dates invalides et affichera une erreur si vous essayez de soumettre une date hors limites.
Vous pouvez aussi utiliser l'attribut required pour rendre la saisie de la date obligatoire — une erreur sera affichée si vous essayez de soumettre un champ date vide.
Voyons un exemple de dates minimale et maximale, et rendons aussi le champ obligatoire :
Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici :
Voici le CSS utilisé dans l'exemple ci-dessus. Nous utilisons les pseudo-classes :valid et :invalid pour ajouter une icône à côté du champ de saisie, selon que la valeur courante est valide ou non. Nous avons dû placer l'icône sur un <span> à côté du champ, et non sur le champ lui-même, car dans Chrome au moins, le contenu généré du champ est placé à l'intérieur du contrôle du formulaire et ne peut pas être mis en forme ou affiché correctement.
Attention : La validation des formulaires côté client n'est pas un substitut à la validation côté serveur. Il est facile pour quelqu'un de modifier le HTML, ou de contourner entièrement votre HTML et d'envoyer les données directement à votre serveur. Si votre serveur ne valide pas les données reçues, cela peut entraîner des problèmes avec des données mal formatées, trop volumineuses, d'un type incorrect, etc.
Dans cet exemple, nous créons un sélecteur de date en utilisant le sélecteur natif <input type="date">.
Le HTML ressemble à ceci :
Le CSS ressemble à ceci :
| Valeur | Une chaîne représentant une date au format YYYY-MM-DD, ou vide |
| Évènements | change et input |
| Attributs pris en charge | autocomplete, list, readonly, step |
| Attributs IDL | value, valueAsDate, valueAsNumber |
| Interface DOM | HTMLInputElement |
| Méthodes | select(), stepDown(), stepUp() |
| Rôle ARIA implicite | Pas de rôle correspondant (angl.) |
| HTML # date-state-(type=date) |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 22 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.