TimeInput

Un instant dans une seule case : heure et minute, et, dans le format à 12 heures, AM ou PM. Le format appartient au produit, pas au système de l'utilisateur.

Sur cette page

Playground

Quand rappeler ?

Horloge

État

Fond

HTML

<fieldset class="feitio-fieldset"><legend class="feitio-label">Quand rappeler ?</legend><div class="feitio-time-field" data-hour-cycle="24"><input class="seg" inputmode="numeric" maxlength="2" value="19" aria-label="Heure"><span class="sep" aria-hidden="true">:</span><input class="seg" inputmode="numeric" maxlength="2" value="30" aria-label="Minute"></div></fieldset>

Quand l'utiliser

Pour toute heure saisie par la personne : un rappel, un emploi du temps.

Quand ne pas l'utiliser

Pour quelques instants fixes (matin, après-midi, soir) : des Radios.
Le champ d'heure du navigateur (type="time") : il suit le format du système de l'utilisateur, que le produit ne peut pas choisir, et chaque navigateur le dessine différemment.

Exemples

Quand se souvenir ?

24 ou 12 heures

Le format provient de l'attribut data-hour-cycle. Dans la version à 12 heures, AM/PM se trouve à l'intérieur de la case, et un clic le change.

Afficher le code

HTML

<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Quando lembrar?</legend>
  <div class="feitio-time-field" data-hour-cycle="24">
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Hora">
    <span class="sep" aria-hidden="true">:</span>
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Minuto">
    <button type="button" class="period" aria-label="AM ou PM">AM</button>
  </div>
</fieldset>

Anatomie

Heure : deux chiffres.
Minute : deux chiffres, après le point-virgule.
AM ou PM : uniquement dans le format à 12 heures ; un clic le change.

États

Vide

Rempli, 24h

Rempli, 12h

Erreur dans la minute

Use a minute between 00 and 59

Le groupe est un champ avec la question ; chaque partie a son propre nom ("Heure", "Minute", "Matin ou Soir").
L'erreur indique quelle partie corriger et marque uniquement celle-ci.
La boîte entière affiche la bordure de focus.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-time-field"`	obligatoire	La boîte avec ses parties.
`data-hour-cycle`	`"24"`, `"12"`	Le format, choisi par le produit.
`class="seg"`	heure et minute	Avec `inputmode="numeric"` et `maxlength="2"`.
`class="period"`	le bouton Matin/Soir	Ne s'affiche que dans le format à 12 heures.
`aria-invalid="true"`	uniquement sur la mauvaise partie	Marque uniquement l'heure ou uniquement la minute.