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
ref bindable	HTMLDivElement		The DOM reference of the picker 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.
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.
triggerRef bindable	HTMLButtonElement		The DOM reference of the trigger button.
popupRef bindable	HTMLDivElement		The DOM reference of the calendar popup.
locale, blackoutDates, headers, minDate, maxDate, weekStart from CalendarViewProps
Element Attributes (div)