Les éléments<input> detype="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 formatyyyy-mm-dd.

La valeur obtenue inclut l'année, le mois et le jour, maispas l'heure. Les types de champtime etdatetime-local permettent de saisir respectivement une heure ou une date et une heure.

Exemple interactif

<label for="start">Date de début&nbsp;:</label><input  type="date"   name="trip-start"  value="2018-07-22"  min="2018-01-01"  max="2018-12-31" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

Valeur

Une chaîne de caractères représentant la date saisie dans le champ. La date est formatée selon leformat des chaînes de date.

Vous pouvez définir une valeur par défaut pour le champ en indiquant une date dans l'attributvalue :

<input type="date" value="2017-06-01" />

Vous pouvez obtenir et définir la valeur de la date en JavaScript avec les propriétésvalue etvalueAsNumber deHTMLInputElement. Par exemple :

const dateControl = document.querySelector('input[type="date"]');dateControl.value = "2017-06-01";console.log(dateControl.value); // affiche "2017-06-01"console.log(dateControl.valueAsNumber); // affiche 1496275200000, un timestamp JavaScript (exprimé en ms)

Ce code recherche le premier élément<input> dont letype estdate, 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.

Attributs supplémentaires

En plus desattributs universels et desattributs de champs communs à tous les éléments<input>, le champ de saisie de typedate prend en charge les attributs suivants :

max

La date la plus avancée qui peut être saisie. Si lavalue entrée dans l'élément est postérieure, l'élément ne respecte pasles contraintes de validation. Si la valeur de l'attributmax n'est pas une chaîne de caractères de date possible au formatyyyy-mm-dd, alors l'élément n'a pas de valeur maximale.

Si les attributsmax etmin sont tous les deux définis, cette valeur doit être une chaîne de caractères de datepostérieure ou égale à celle de l'attributmin.

min

La date la plus ancienne qui peut être saisie. Si lavalue entrée dans l'élément est antérieure, l'élément ne respecte pasles contraintes de validation. Si la valeur de l'attributmin n'est pas une chaîne de caractères de date possible au formatyyyy-mm-dd, alors l'élément n'a pas de valeur minimale.

Si les attributsmax etmin sont tous les deux définis, cette valeur doit être une chaîne de caractères de dateantérieure ou égale à celle de l'attributmax.

step

L'attributstep est un nombre qui définit la granularité à laquelle la valeur doit se conformer, ou la valeur spécialeany, 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 estmin si elle est définie,value sinon, ou0 (l'époque Unix,1970-01-01) si aucune n'est fournie.

Pour les champs de typedate, la valeur destep est donnée en jours et est traitée comme un nombre de millisecondes égal à 86 400 000 fois la valeur destep (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èresany signifie qu'aucun pas n'est impliqué, et que n'importe quelle valeur est autorisée (sous réserve d'autres contraintes, telles quemin etmax). En réalité, cela a le même effet que1 pour les champs de typedate car l'interface du sélecteur ne permet de sélectionner que des jours entiers.

Utiliser des contrôles de saisie des dates

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

Utilisation simple

Dans son expression la plus simple<input type="date"> s'utilise avec un élément<input> et un élément<label> :

<form action="https://example.com">  <label>    Veuillez saisir votre date de naissance&nbsp;:    <input type="date" name="bday" />  </label>  <p><button>Envoyer</button></p></form>

Ce fragment de HTML envoie la date saisie avec la clébday vershttps://example.com, ce qui donne une URL résultante commehttps://example.com/?bday=1955-06-08.

Paramétrer une date maximale et une date minimale

On peut utiliser les attributsmin etmax 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) :

<form>  <label    >Veuillez choisir la meilleure date pour la soirée&nbsp;:    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />  </label></form>

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

Contrôler la taille du champ de saisie

<input type="date"> ne permet pas d'utiliser des attributs de dimensionnement tels quesize. Il est nécessaire d'utiliserCSS pour gérer ces aspects de mise en forme.

Validation

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 utilisezmin etmax pour restreindre les dates disponibles (voirParamé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'attributrequired 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 :

<form>  <label>    Sélectionner la meilleure date (entre le premier et le 20 avril)&nbsp;:    <input      type="date"      name="party"      min="2017-04-01"      max="2017-04-20"      required />    <span></span>  </label>  <p>    <button>Envoyer</button>  </p></form>

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

label {  display: flex;  align-items: center;}span::after {  padding-left: 5px;}input:invalid + span::after {  content: "✖";}input:valid + span::after {  content: "✓";}

Exemples

Dans cet exemple, nous créons un sélecteur de date en utilisant le sélecteur natif<input type="date">.

HTML

Le HTML ressemble à ceci :

<form>  <div>    <label for="bday">Entrez votre date de naissance&nbsp;:</label>    <input type="date" name="bday" />    <span></span>  </div></form>

CSS

Le CSS ressemble à ceci :

input:invalid + span::after {  content: " ✖";}input:valid + span::after {  content: " ✓";}

Résultats

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément générique<input> et l'interface DOM qui le porte,HTMLInputElement
• Un tutoriel sur les sélecteurs de date et d'heure
• Les formats de date et d'heure utilisés en HTML