Sélecteur d'heure

Sélecteur d'heure. Des colonnes à roue permettent de choisir l'heure / minute / seconde ; lorsque format ne contient pas ss, la colonne des secondes est automatiquement masquée ; arrowControl remplace les roues par des boutons-flèches en tête de colonne. Le panneau est monté sur body (Vue2 n'a pas de Teleport).

Sélecteur d'heure

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTimePicker v-model="t1" format="HH:mm:ss" placeholder="Choisir l'heure" clearable />
      <LhTimePicker v-model="t2" format="HH:mm" placeholder="Heure/minute (sans secondes)" size="small" />
      <LhTimePicker v-model="t3" format="HH:mm:ss" arrow-control placeholder="Contrôle par flèches" size="large" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" disabled placeholder="Désactivé" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" readonly placeholder="Lecture seule" />
    </div>
    <LhTimePicker
      v-model="t4"
      format="HH:mm:ss"
      :step-hour="2"
      :step-minute="15"
      :step-second="30"
      placeholder="Pas : heure 2 / minute 15 / seconde 30"
    />
    <p class="demo-note">Heure/min/sec : {{ fmt(t1) }} | Heure/min : {{ fmt(t2) }} | Flèches : {{ fmt(t3) }} | Pas : {{ fmt(t4) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    t1: new Date(2026, 9, 3, 14, 30, 0),
    t2: null,
    t3: null,
    t4: null,
  }),
  methods: {
    fmt(v) {
      if (!(v instanceof Date)) return "(non sélectionné)"
      const p = (n) => String(n).padStart(2, '0')
      return p(v.getHours()) + ':' + p(v.getMinutes()) + ':' + p(v.getSeconds())
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
v-model	Sélection courante	Date \| null	—
mode	Mode (réservé à la liaison date-heure ; actuellement rendu sous forme de colonnes d'heure)	LhTimePickerMode	—
size	Taille	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	Désactivé / effaçable / lecture seule	boolean	false
placeholder	Texte de l'espace réservé	string	Pack de langue
format	Format d'affichage (HH:mm:ss, HH:mm) ; la colonne des secondes est masquée lorsque ss est absent	string	'HH:mm:ss'
arrowControl	Contrôle par flèches (boutons haut/bas en tête de colonne)	boolean	false
stepHour / stepMinute / stepSecond	Pas des heures / minutes / secondes	number	1
teleportTarget	Cible de montage du panneau flottant	string \| HTMLElement	'body'
sx	Propriétés de mise en page rapide	—	—

Events

input (v-model), change (value)

Accessibilité

Chaque colonne est role="spinbutton" + aria-valuenow/min/max ; les deux interactions (roue et flèches) prennent en charge les flèches directionnelles du clavier ; le déclencheur est role="combobox" + aria-expanded, et le bouton de confirmation du panneau est accessible au focus.