Date Picker AI

El Date Picker permite seleccionar una fecha en columnas de día, mes y año con estilo carrusel. Su valor usa el formato YYYY-MM-DD y cualquier columna puede ocultarse para crear, por ejemplo, un selector de solo mes y año.

Uso

<script>
	import { DatePicker } from 'fluentui-svelte';

	let value = $state('');
</script>

<DatePicker bind:value />

Formato de fecha

Usa la propiedad format para alternar entre dd/MM/yyyy y MM/dd/yyyy.

Ver Código

<DatePicker format="dd/MM/yyyy" />
<DatePicker format="MM/dd/yyyy" />

Ocultar columnas

Usa hideDays, hideMonths o hideYears para ocultar columnas individuales del selector, por ejemplo para crear un selector de solo mes y año.

Ver Código

<DatePicker hideDays />

Propiedades del componente

Name	Type	Default	Description
`value` bindable	`string`	`''`	La fecha seleccionada como `YYYY-MM-DD` (coincide con el `<input type="date">` subyacente).
`format`	`'MM/dd/yyyy'` \| `'dd/MM/yyyy'`	`'dd/MM/yyyy'`	El orden en el que se disponen las tres columnas.
`open` bindable	`boolean`	`false`	Controla el estado de apertura del picker.
`hideYears`	`boolean`	`false`	Elimina la columna de años.
`hideMonths`	`boolean`	`false`	Elimina la columna de meses.
`hideDays`	`boolean`	`false`	Elimina la columna de días.
`minYear`	`number`	`Current - 100`	El primer año que ofrece la columna de años.
`maxYear`	`number`	`Current + 100`	El último año que ofrece la columna de años.
`disabledDates`	`Date[]`	`[]`	Días concretos (año-mes-día) que no se pueden seleccionar.
`disabledMonths`	`Date[]`	`[]`	Meses concretos (por mes + año) que no se pueden seleccionar.
`disabledYears`	`Date[]`	`[]`	Años concretos (por año) que no se pueden seleccionar.
`ref` 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 date'`	El nombre accesible del popup, que se anuncia como un dialog.
Element Attributes (`button`)