componentes / time-picker

TimePicker

Campo que abre columnas de hora y minuto para elegir una hora del día.

Cómo usar

El valor es una cadena `"HH:mm"` en 24h (`"14:30"`), también con `hour12`, que solo cambia cómo se muestra y añade una columna AM/PM. El panel queda abierto mientras eliges: elige la hora, luego el minuto, y cierra con `Esc` o haciendo clic fuera. `minuteStep` limita los minutos (p. ej. 15).

preview

Hora

Hora (12h, cada 15 min)

TimePicker.tsx

import { TimePicker } from "vaiperui";
 
const [time, setTime] = useState("14:30");
 
<TimePicker label="Hora" value={time} onValueChange={setTime} />
<TimePicker label="Hora" hour12 minuteStep={15} />

24h y 12h

preview

24h

12h

formato-hora.tsx

<TimePicker defaultValue="14:30" />
<TimePicker hour12 defaultValue="14:30" />

Paso de los minutos

preview

paso-minutos.tsx

<TimePicker minuteStep={15} />
<TimePicker minuteStep={30} />

Tamaños

preview

tamanos.tsx

<TimePicker size="sm" />
<TimePicker size="md" />
<TimePicker size="lg" />

Estados

preview

ayudaDetalle extra

ayuda

errorEsto es obligatorio

error

deshabilitado

solo lectura

estados.tsx

<TimePicker label="..." helperText="..." />
<TimePicker label="..." errorMessage="..." />
<TimePicker label="..." disabled />
<TimePicker label="..." readOnly />

Props

Prop	Valores	Predeterminado	Descripción
value / defaultValue	string	ninguno	Hora del día como "HH:mm" (24h), controlada o inicial
onValueChange	(time: string) => void	ninguno	Se llama con "HH:mm" cuando cambia la hora, el minuto o el período
hour12	boolean	false	12h con una columna AM/PM
minuteStep	number	1	Granularidad de la columna de minutos
labels	{ hours, minutes, period, am, pm }	ninguno	Textos de las columnas de hora
label / helperText	string	ninguno	Etiqueta sobre el campo y texto de ayuda debajo
errorMessage	string	ninguno	Texto de error; su sola presencia fuerza el estado de error
name	string	ninguno	Nombre del campo del formulario
disabled / readOnly	boolean	false	No abre el panel; readOnly aún muestra el valor
variant	ring \| outline	ring	Estilo de foco, igual que Input
size / radius	sm \| md \| lg / none \| sm \| md \| lg \| full	md / md	Altura del campo y redondeo de las esquinas
aria-label	string	ninguno	Nombre accesible cuando no hay etiqueta
panelLabel	string	ninguno	Nombre accesible del panel abierto

Accesibilidad

El disparador es un `<button>` con `aria-haspopup="dialog"` y `aria-expanded` que refleja el estado del panel.
El `label` se enlaza con `htmlFor`; sin `label`, el disparador usa `aria-label`.
`errorMessage` define `aria-invalid` y `aria-describedby` apuntando al mensaje; sin error, `helperText` se enlaza con `aria-describedby`.
El panel es un `role="dialog"` nombrado por `panelLabel`, renderizado en un portal en `document.body`.
`disabled` deshabilita el botón; `readOnly` mantiene el foco posible, pero el panel nunca se abre.
Horas, minutos y (con `hour12`) AM/PM son columnas, cada una un `role="group"` nombrado por `labels.hours`, `labels.minutes` y `labels.period`.
Cada opción es un `<button>` con `aria-pressed` en la seleccionada; la opción seleccionada se desplaza a la vista al abrir el panel.

Teclado

Tecla	Acción
Enter / Space	Abre o cierra el panel desde el disparador.
Arrow Up / Down	Dentro de una columna, mueve el foco a la opción anterior / siguiente.
Tab	Se mueve entre las opciones del panel (cada opción es una parada de Tab).
Enter / Space	Elige la opción enfocada; el panel sigue abierto.
Esc	Cierra el panel y devuelve el foco al disparador.

Ten en cuenta

El foco no pasa al panel al abrir y el panel sigue abierto tras elegir: ciérralo con Esc o haciendo clic fuera.
Hacer clic fuera cierra el panel sin devolver el foco; solo Esc restaura el foco en el disparador.
La hora solo se elige en las columnas (sin escribir; solo los minutos listados por `minuteStep`). Pasa `labels` y `panelLabel` traducidos; los valores por defecto están en inglés.