Calendar Date Picker

The Calendar Date Picker pairs a button trigger with a Calendar View popup. Clicking the trigger opens the calendar, and selecting a day updates the bound value and closes the popup.

Usage

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

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

<CalendarDatePicker bind:value />

Component API

The Calendar Date Picker builds on Calendar View, so calendar props such as blackoutDates, minDate, maxDate, weekStart and headers are forwarded straight to the popup calendar. You can see the full list in the Component Props section below.

Component Props

Name	Type	Default	Description
wrapperRef bindable	HTMLDivElement | null		The DOM reference of the wrapper element.
value bindable	Date | null	null	The selected date.
format	Intl.DateTimeFormatOptions	{ year: 'numeric', month: 'numeric', day: 'numeric' }	The options used to format the date rendered on the trigger. When rendering on the server, give it the timeZone of the visitor: the calendar picks dates at the visitor's midnight, and the server would format them in its own time zone.
calendarPosition	Partial<ComputePositionConfig>		The floating UI configuration object of the calendar popup. Keys left out keep their default.
onChange	(event: Event, value: Date | null) => void		Called whenever the selected date changes.
popupLabel	string	'Choose a date'	The accessible name of the calendar popup, which is announced as a dialog.
ref bindable	HTMLInputElement | null		The DOM reference of the native date input that holds the value, as YYYY-MM-DD. The other attributes of the picker are applied to it.
buttonRef bindable	HTMLButtonElement | null		The DOM reference of the button that opens the calendar.
buttonProps	ButtonProps		The props to spread on the Button that opens the calendar.
wrapperAttributes	HTMLAttributes		The attributes to spread on the wrapper element.
popupRef bindable	HTMLDivElement | null		The DOM reference of the calendar popup.
locale, blackoutDates, headers, minDate, maxDate, today, weekStart from CalendarViewProps
NativeFieldAttributes<HTMLInputAttributes>