Selector de hora

Selector de hora. Las horas / minutos / segundos se eligen mediante columnas de rueda; si format no contiene ss, la columna de segundos se oculta automáticamente; arrowControl cambia al control mediante flechas en la cabecera de las columnas. El panel se monta en body (Vue2 no dispone de Teleport).

Selector de hora

<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="Seleccionar hora" clearable />
      <LhTimePicker v-model="t2" format="HH:mm" placeholder="Hora y minuto (sin columna de segundos)" size="small" />
      <LhTimePicker v-model="t3" format="HH:mm:ss" arrow-control placeholder="Control con flechas" size="large" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" disabled placeholder="Desactivado" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" readonly placeholder="Solo lectura" />
    </div>
    <LhTimePicker
      v-model="t4"
      format="HH:mm:ss"
      :step-hour="2"
      :step-minute="15"
      :step-second="30"
      placeholder="Saltos: hora 2 / minuto 15 / segundo 30"
    />
    <p class="demo-note">Hora, minuto y segundo: {{ fmt(t1) }} | Hora y minuto: {{ fmt(t2) }} | Flechas: {{ fmt(t3) }} | Saltos: {{ 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 '(sin selección)'
      const p = (n) => String(n).padStart(2, '0')
      return p(v.getHours()) + ':' + p(v.getMinutes()) + ':' + p(v.getSeconds())
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
v-model	Selección actual	Date \| null	—
mode	Modo (reservado para la vinculación con fecha y hora; actualmente se renderiza como columnas de hora)	LhTimePickerMode	—
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	Desactivado / borrable / solo lectura	boolean	false
placeholder	Texto del marcador de posición	string	Paquete de idioma
format	Formato de visualización (HH:mm:ss, HH:mm); si no contiene ss, se oculta la columna de segundos	string	'HH:mm:ss'
arrowControl	Control con flechas (botones arriba/abajo en la cabecera de las columnas)	boolean	false
stepHour / stepMinute / stepSecond	Salto de horas / minutos / segundos	number	1
teleportTarget	Destino de montaje de la capa emergente	string \| HTMLElement	'body'
sx	Prop abreviada de maquetación	—	—

Events

input（v-model）、change (value)

Accesibilidad

Cada columna usa role="spinbutton" + aria-valuenow/min/max, y tanto la rueda como las flechas admiten las teclas de dirección del teclado; el disparador usa role="combobox" + aria-expanded, y el botón de confirmación del panel es accesible mediante el foco.