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.
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.
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. Salvo que se indique min, el input nativo no acepta fechas anteriores. |
maxYear | number | Current + 100 | El último año que ofrece la columna de años. Salvo que se indique max, el input nativo no acepta fechas posteriores. |
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 | HTMLInputElement | null | La referencia DOM del input de fecha 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 date' | El nombre accesible del popup, que se anuncia como un dialog. |
columnLabels | { month?: string; day?: string; year?: string } | { month: 'Month', day: 'Day', year: 'Year' } | Los nombres de las columnas de mes, día y año: se muestran en el botón mientras no hay fecha, y nombran las listas del popup. |
NativeFieldAttributes<HTMLInputAttributes> |