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
ref bindable	HTMLDivElement		La referencia del DOM del elemento picker.
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 trigger.
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.
triggerRef bindable	HTMLButtonElement		La referencia del DOM del botón trigger.
popupRef bindable	HTMLDivElement		La referencia del DOM del popup del calendario.
locale, blackoutDates, headers, minDate, maxDate, weekStart from CalendarViewProps
Element Attributes (div)