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.

Ver Código

<TimePicker format={24} />
<TimePicker format={12} />

Ocultar columnas

Usa hideHours, hideMinutes o hideSeconds para ocultar columnas individuales. Por defecto se muestra la columna de segundos.

Ver Código

<TimePicker format={24} hideSeconds />

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.
`element` bindable	`HTMLButtonElement`		La referencia del DOM del botón trigger.
`wrapperRef` bindable	`HTMLDivElement`		La referencia del DOM del elemento que envuelve el trigger y su input.
`wrapperAttributes`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`inputElement` bindable	`HTMLInputElement`		La referencia DOM del input subyacente.
`inputProps`	`HTMLInputAttributes`		Atributos HTML del elemento input subyacente. Dale un `name` para enviar el valor con un formulario.
`popupLabel`	`string`	`'Choose a time'`	El nombre accesible del popup, que se anuncia como un dialog.
Element Attributes (`button`)