<input type="time">

Exemple interactif

<label for="appt">Choisissez une heure pour votre réunion&nbsp;:</label>

<input type="time" id="appt" name="appt" min="09:00" max="18:00" required />

<small>Les heures de bureau sont de 9h à 18h</small>

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

input,
label {
  margin: 0.4rem 0;
}

Attributs supplémentaires

En complément des attributs communs à l'ensemble des éléments <input>, les champs de type time gèrent les attributs suivants.

list

La valeur de cet attribut est l'identifiant (id) d'un élément <datalist> situé dans le même document. L'élément <datalist> fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ (type) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste.

max

Une chaîne de caractères indiquant l'heure la plus tardive qui peut être acceptée, définie dans le même format de valeur temporelle que celui décrit ci-dessus. Si la chaîne de caractères définie n'est pas une heure valide, aucune valeur maximale n'est définie.

min

Une chaîne de caractères indiquant l'heure la plus tôt qui peut être acceptée, définie dans le même format de valeur temporelle que celui décrit ci-dessus. Si la chaîne de caractères définie n'est pas une heure valide, aucune valeur minimale n'est définie.

readonly

Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité par l'utilisateur·ice. La valeur de l'attribut value peut, toutefois, être modifiée avec du code JavaScript qui modifierait la valeur de la propriété value sur l'objet HTMLInputElement.

step

L'attribut step est un nombre qui définit la granularité à laquelle la valeur doit obéir, ou la valeur any (décrite ci-après). Seules les valeurs qui sont des incréments en multiple de step depuis la valeur de base (min si cet attribut est défini, value sinon, et si aucun n'est fourni, une valeur par défaut appropriée) sont valides.

Pour les champs de type time, la valeur de step est exprimée en secondes et est interprétée comme un nombre de millisecondes égal à 1 000 fois la valeur de step (la valeur numérique sous-jacente est en millisecondes). La valeur par défaut est 60, ce qui correspond à 1 minute.

Une valeur de chaînes de caractères any signifie qu'aucun pas n'est implicite et que toute 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 60 pour les champs time, car l'interface utilisateur du sélecteur ne permet dans ce cas que de sélectionner des minutes entières.

Validation

Par défaut, <input type="time"> ne valide pas les valeurs saisies, autre que l'interface utilisateur qui ne permet généralement pas de saisir autre chose qu'une valeur temporelle. Cela est utile, mais vous ne pouvez pas vous fier entièrement à la valeur pour être une chaîne de temps correcte, car elle pourrait être une chaîne de caractères vide (""), ce qui est autorisé. Pour des exemples de validation des contraintes utilisant les attributs min, max, step et required, voir la section définir les heures maximales et minimales.

Exemples

Utilisation simple du type time

L'utilisation la plus simple de <input type="time"> implique une combinaison simple d'un élément <input> et d'un élément <label>, comme illustré ci-dessous :

<form>
  <label for="appointment-time">
    Choisissez une heure de rendez-vous&nbsp;:
  </label>
  <input id="appointment-time" type="time" name="appointment-time" />
</form>

Créer une interface de sélection de l'heure

Dans cet exemple, nous créons un élément d'interface pour choisir l'heure en utilisant le sélecteur natif créé avec <input type="time"> :

<form>
  <label for="appointment-time">
    Choisissez une heure de rendez-vous (heures d'ouverture 12:00 à
    18:00)&nbsp;:
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00"
    required />
  <span class="validity"></span>
</form>

input[type="time"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Contrôler la taille du champ

<input type="time"> ne prend pas en charge les attributs de taille de formulaire tels que size, car les heures ont toujours à peu près le même nombre de caractères. Vous devrez utiliser le CSS pour les besoins de dimensionnement.

Définir l'attribut value

Vous pouvez définir une valeur par défaut pour le champ en incluant une heure valide dans l'attribut value lors de la création de l'élément <input>, comme suit :

<label for="appointment-time">
  Choisissez une heure de rendez-vous&nbsp;:
</label>
<input
  id="appointment-time"
  type="time"
  name="appointment-time"
  value="13:30" />

Définir la valeur à l'aide de JavaScript

Vous pouvez également obtenir et définir la valeur de l'heure en JavaScript en utilisant la propriété value de HTMLInputElement, par exemple :

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";

Format de la valeur de l'heure

La value du champs time est toujours au format 24 heures avec des zéros initiaux : HH:mm, quel que soit le format d'entrée, qui est probablement sélectionné en fonction de la locale de l'utilisateur·ice (ou par l'agent utilisateur). Si l'heure inclut des secondes (voir Utiliser l'attribut step), le format est toujours HH:mm:ss. Vous pouvez en savoir plus sur le format de la valeur de l'heure utilisé par ce type d'entrée dans la représentation des heures.

Dans cet exemple, vous pouvez voir la valeur du champ de l'heure en saisissant une heure et en observant comment elle change ensuite.

Premièrement, regardons le HTML. Nous incluons un libellé et un champ de saisie, et ajoutons un élément <p> avec un <span> pour afficher la valeur du champ time :

<form>
  <label for="startTime">Heure de début&nbsp;: </label>
  <input type="time" id="startTime" />
  <p>
    Valeur du champ <code>time</code>&nbsp;:
    <code>"<span id="value">n/a</span>"</code>.
  </p>
</form>

Le code JavaScript ajoute un écouteur d'évènements au champ de l'heure pour surveiller l'évènement input, qui est déclenché chaque fois que le contenu d'un élément de saisie change. Lorsque cela se produit, le contenu du <span> est remplacé par la nouvelle valeur de l'élément input.

const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener("input", () => {
  valueSpan.innerText = startTime.value;
});

Lorsque un formulaire incluant un champ time est soumis, la valeur est encodée avant d'être incluse dans les données du formulaire. L'entrée de données du formulaire pour un champ de type time sera toujours sous la forme name=HH%3Amm, ou name=HH%3Amm%3Ass si des secondes sont incluses (voir Utiliser l'attribut step).

Utiliser l'attribut step

You can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets).

It takes an integer value defining the number of seconds you want to increment by; the default value is 60 seconds. With this as the default, most user agent time UIs display hours and minutes but not seconds. Including the step attribute with any numeric value other than a value divisible by 60 adds seconds to the UI, if the min or max value has not already caused the seconds to be visible.

<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" step="2" />
</form>

Pour définir des minutes ou des heures comme pas, définissez le nombre de minutes ou d'heures en secondes, par exemple 120 pour 2 minutes, ou 7200 pour 2 heures.

Définir les heures minimales et maximales

Vous pouvez utiliser les attributs min et max pour restreindre les heures valides que l'utilisateur·ice peut choisir. Dans l'exemple suivant, nous définissons une heure minimale de 12:00 et une heure maximale de 18:00 :

<form>
  <label for="appointment-time">
    Choisissez une heure de rendez-vous (heures d'ouverture de 12:00 à
    18:00)&nbsp;:
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00" />
  <span class="validity"></span>
</form>

Voici le CSS utilisé dans l'exemple ci-dessus. Nous utilisons les propriétés CSS :valid et :invalid pour mettre en forme l'élément de saisie en fonction de la validité de la valeur actuelle. Nous ajoutons une icône en tant que contenu généré sur un <span> à côté de l'élément de saisie.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Le résultat ici est que :

• Seules les heures comprises entre 12:00 et 18:00 seront considérées comme valides ; les heures en dehors de cette plage seront considérées comme invalides.

Avoir un minimum et un maximum autour de minuit

En définissant un attribut min supérieur à l'attribut max, la plage horaire valide contournera minuit pour produire une plage horaire valide. Cette fonctionnalité n'est pas prise en charge par d'autres types de champs de saisie.

const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";

if (input.validity.valid && input.type === "time") {
  // <input type=time> plage inversée prise en charge
} else {
  // <input type=time> plage inversée non prise en charge
}

Rendre les heures obligatoires

De plus, vous pouvez utiliser l'attribut required pour rendre la saisie de l'heure obligatoire. Les navigateurs afficheront une erreur si vous essayez de soumettre une heure en dehors des limites définies ou un champ horaire vide.

Voyons un exemple ; ici, nous avons défini des heures minimales et maximales, et avons également rendu le champ obligatoire :

<form>
  <div>
    <label for="appointment-time">
      Choisissez une heure de rendez-vous (heures d'ouverture de 12:00 à
      18:00)&nbsp;:
    </label>
    <input
      id="appointment-time"
      type="time"
      name="appointment-time"
      min="12:00"
      max="18:00"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Envoyer le formulaire" />
  </div>
</form>

Si vous essayez de soumettre le formulaire avec une heure incomplète (ou avec une heure en dehors des limites définies), le navigateur affichera une erreur. Essayez de jouer avec l'exemple maintenant :

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément <input type="date">
• L'élément <input type="datetime-local">
• L'élément <input type="week">
• L'élément <input type="month">
• L'élément <input> ainsi que l'interface HTMLInputElement qui permet de le manipuler
• Les formats de date et d'heure utilisés en HTML
• Un tutoriel pour les sélecteurs de date et d'heure