Formulaires

Sélecteur d'heure

Quand l'utiliser

Pour toute saisie d'heure : livraison prévue, créneau d'un relevé, ouverture du rayon, rappel. Le cadran Material de Vuetify se manipule mal au doigt et se lit mal ; les roues se font défiler du pouce, se lisent d'un coup d'œil et marchent aussi à la souris et au clavier.

La pastille d'heure

C'est le cas courant, comme dans les réglages d'iOS : l'heure s'affiche dans une pastille grise ; un appui ouvre les roues dans une bulle juste dessous (ou dessus si la place manque), la valeur change en direct, un appui ailleurs ou Échap referme. Pas de bouton OK.

<div class="hb-stack" style="max-width:420px">
  <div class="hb-row" style="justify-content:space-between"><span>Livraison prévue <span class="hb-small">minute par minute</span></span><button type="button" id="ex-time-1">14:32</button></div>
  <div class="hb-row" style="justify-content:space-between"><span>Relevé du soir <span class="hb-small">par pas de 15 min</span></span><button type="button" id="ex-time-2">18:00</button></div>
  <span class="hb-small" id="ex-time-out">Valeur : 14:32</span>
</div>
<script>
  Hublot.timeField(document.getElementById('ex-time-1'), { value: '14:32', onChange: function (v) { document.getElementById('ex-time-out').textContent = 'Valeur : ' + v } })
  Hublot.timeField(document.getElementById('ex-time-2'), { value: '18:00', step: 15 })
</script>

Dans un formulaire

Posé dans un hb-group, le même bouton prend le cadre d'un champ (filet, fond blanc, valeur à gauche, hauteur --control) pour s'aligner sur les champs voisins. La bulle et les roues ne changent pas.

<div class="hb-form" style="max-width:560px">
  <div class="hb-group"><label class="hb-label" for="ex-time-d">Date de livraison</label><input id="ex-time-d" class="hb-field" value="06/11/2026"></div>
  <div class="hb-group"><label class="hb-label" id="ex-time-l" for="ex-time-3">Heure de livraison</label><button type="button" id="ex-time-3" aria-labelledby="ex-time-l ex-time-3">06:45</button></div>
</div>
<script>
  Hublot.timeField(document.getElementById('ex-time-3'), { value: '06:45', label: 'Heure de livraison' })
</script>

Les roues seules

Dans un écran dédié (tablette en rayon, panneau de réglage), les roues se posent directement dans la page.

<div class="hb-row" style="gap:var(--space-6);align-items:flex-start">
  <div class="hb-card hb-card-body hb-stack" style="align-items:center">
    <span class="hb-label">Ouverture du rayon</span>
    <div id="ex-wheels-1"></div>
    <span class="hb-small" id="ex-wheels-out">08:30</span>
  </div>
  <div class="hb-card hb-card-body hb-stack" style="align-items:center" data-activity="boucherie">
    <span class="hb-label">Par pas de 5 min</span>
    <div id="ex-wheels-2"></div>
  </div>
</div>
<script>
  Hublot.timePicker(document.getElementById('ex-wheels-1'), { value: '08:30', label: 'Ouverture du rayon', onChange: function (v) { document.getElementById('ex-wheels-out').textContent = v } })
  Hublot.timePicker(document.getElementById('ex-wheels-2'), { value: '12:45', step: 5 })
</script>

Comportement

• Chaque passage de ligne donne une vibration très courte sur Android (Safari iOS n'en propose pas aux pages web).
• La ligne au centre est en demi-gras ; les autres tournent sur un cylindre et s'effacent vers les bords.
• Hauteur de ligne selon la densité : 32 px en compact, 36 px en normal, 44 px en touch ; cinq lignes visibles.
• 24 h, chiffres tabulaires. Minute par minute par défaut ; step règle un autre pas (5, 10, 15) quand le métier n'a pas besoin de la minute, et une valeur hors pas est alors arrondie au plus proche.

Dans une application

// Vue 2 (magasin) : la pastille
// <button type="button" ref="heure" />
mounted () {
  this.heureField = Hublot.timeField(this.$refs.heure, { value: this.heure, onChange: v => { this.heure = v } })
},
beforeDestroy () { this.heureField.destroy() }

// Les roues seules : Hublot.timePicker(el, { value: '08:30', step: 5, onChange }) ; .set('09:00') pour changer de l'extérieur.
// Les deux émettent aussi un évènement 'change' (detail = 'HH:MM') : @change="heure = $event.detail".

Accessibilité

Chaque roue est un spinbutton avec son nom (« Heures », « Minutes ») et sa valeur lue (« 14 h », « 30 min ») ; la bande centrale porte l'anneau de focus quand une roue a le focus clavier. La pastille annonce qu'elle ouvre une bulle (aria-haspopup, aria-expanded) ; à la fermeture, le focus lui revient. prefers-reduced-motion : les déplacements au clavier et à l'appui se font sans glissement.