Calendar Date Picker

El Calendar Date Picker combina un botón disparador con un popup de Calendar View. Al hacer clic en el disparador se abre el calendario y, al seleccionar un día, se actualiza el valor enlazado y se cierra el popup.

Uso

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

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

<CalendarDatePicker bind:value />

API del componente

El Calendar Date Picker se construye sobre Calendar View, por lo que propiedades del calendario como blackoutDates, minDate, maxDate, weekStart y headers se reenvían directamente al calendario del popup. Puedes ver la lista completa en la sección Propiedades del componente más abajo.

Propiedades del componente

Name	Type	Default	Description
wrapperRef bindable	HTMLDivElement | null		La referencia DOM del elemento contenedor.
value bindable	Date | null	null	La fecha seleccionada.
format	Intl.DateTimeFormatOptions	{ year: 'numeric', month: 'numeric', day: 'numeric' }	Las opciones con las que se formatea la fecha que se muestra en el botón. Al renderizar en el servidor, dale el timeZone del visitante: el calendario elige fechas a la medianoche del visitante, y el servidor las formatearía en su propia zona horaria.
calendarPosition	Partial<ComputePositionConfig>		El objeto de configuración de floating-ui del popup del calendario. Las claves que se omitan mantienen su valor por defecto.
onChange	(event: Event, value: Date | null) => void		Se llama cada vez que cambia la fecha seleccionada.
popupLabel	string	'Choose a date'	El nombre accesible del popup del calendario, que se anuncia como un dialog.
ref bindable	HTMLInputElement | null		La referencia DOM del input de fecha nativo que guarda el valor, como YYYY-MM-DD. El resto de atributos del selector se aplican a él.
buttonRef bindable	HTMLButtonElement | null		La referencia DOM del botón que abre el calendario.
buttonProps	ButtonProps		Las props que se aplican al Button que abre el calendario.
wrapperAttributes	HTMLAttributes		Los atributos que se aplican al elemento wrapper.
popupRef bindable	HTMLDivElement | null		La referencia del DOM del popup del calendario.
locale, blackoutDates, headers, minDate, maxDate, today, weekStart from CalendarViewProps
NativeFieldAttributes<HTMLInputAttributes>