Time Picker AI
El Time Picker permite seleccionar una hora en columnas de horas, minutos y segundos con estilo carrusel. Admite reloj de 24 horas o de 12 horas con columna AM/PM, y cada columna puede ocultarse por separado.
Uso
<script>
import { TimePicker } from 'fluentui-svelte';
let value = $state('');
</script>
<TimePicker bind:value format={12} />Formato de reloj
Usa la propiedad format para elegir entre un reloj de 24 horas y uno de 12 horas con columna AM/PM.
Ocultar columnas
Usa hideHours, hideMinutes o hideSeconds para ocultar columnas individuales. Por defecto se muestra la columna de segundos.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
value bindable | string | '' | La hora seleccionada en formato 24h HH:mm o HH:mm:ss (coincide con <input type="time">). |
format | 12 | 24 | 24 | Formato de reloj: 24 (00-23) o 12 (01-12 con una columna AM/PM). |
open bindable | boolean | false | Controla el estado de apertura del picker. |
hideHours | boolean | false | Elimina la columna de horas. |
hideMinutes | boolean | false | Elimina la columna de minutos. |
hideSeconds | boolean | false | Elimina la columna de segundos. |
ref bindable | HTMLInputElement | null | La referencia DOM del input de hora nativo que guarda el valor. El resto de atributos del selector se aplican a él. | |
buttonRef bindable | HTMLButtonElement | null | La referencia DOM del botón que abre el selector. | |
buttonAttributes | HTMLButtonAttributes | Los atributos que se aplican al botón que abre el selector. | |
wrapperRef bindable | HTMLDivElement | null | La referencia DOM del elemento que envuelve el botón y el input nativo. | |
wrapperAttributes | HTMLAttributes | Los atributos que se aplican al elemento wrapper. | |
popupLabel | string | 'Choose a time' | El nombre accesible del popup, que se anuncia como un dialog. |
columnLabels | { hour, minute, second, … (4 keys) } | { hour: 'Hour', minute: 'Minute', second: 'Second', meridiem: 'AM/PM' } | Los nombres de las columnas de hora, minuto, segundo y AM/PM: se muestran en el botón mientras no hay hora, y nombran las listas del popup. |
NativeFieldAttributes<HTMLInputAttributes> |