<input type="date">

Exemple interactif

<label for="start">Date de début&nbsp;:</label>

<input
  type="date"
  id="start"
  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 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 :

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

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 :

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

Attributs supplémentaires

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 :

max

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.

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.

step

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 spécifiée, 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.

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 vers https://example.com, ce qui donne une URL résultante comme https://example.com/?bday=1955-06-08.

Paramétrer une date maximale et une date minimale

On peut utiliser les attributs min et max afin de restreindre les dates qui peuvent être saisies par l'utilisatrice ou l'utilisateur. 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'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).

Contrôler la taille du champ de saisie

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

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

<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 class="validity"></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 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.

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 class="nativeDatePicker">
    <label for="bday">Entrez votre date de naissance&nbsp;:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></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