Date Picker AI

The Date Picker lets users select a date from carousel-style day, month and year columns. Its value uses the YYYY-MM-DD format, and any column can be hidden to build, for example, a month and year only picker.

Usage

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

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

<DatePicker bind:value />

Date Format

Use the format prop to switch between dd/MM/yyyy and MM/dd/yyyy.

View Code

<DatePicker format="dd/MM/yyyy" />
<DatePicker format="MM/dd/yyyy" />

Hiding Columns

Use hideDays, hideMonths or hideYears to hide individual selector columns, for example to build a month and year only picker.

View Code

<DatePicker hideDays />

Component Props

Name	Type	Default	Description
`value` bindable	`string`	`''`	Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`).
`format`	`'MM/dd/yyyy'` \| `'dd/MM/yyyy'`	`'dd/MM/yyyy'`	The order the three columns are laid out in.
`open` bindable	`boolean`	`false`	Controls the open state of the picker.
`hideYears`	`boolean`	`false`	Removes the year column.
`hideMonths`	`boolean`	`false`	Removes the month column.
`hideDays`	`boolean`	`false`	Removes the day column.
`minYear`	`number`	`Current - 100`	The first year offered by the year column.
`maxYear`	`number`	`Current + 100`	The last year offered by the year column.
`disabledDates`	`Date[]`	`[]`	Specific days (year-month-day) that cannot be selected.
`disabledMonths`	`Date[]`	`[]`	Specific months (by month + year) that cannot be selected.
`disabledYears`	`Date[]`	`[]`	Specific years (by year) that cannot be selected.
`ref` bindable	`HTMLButtonElement`		The DOM reference of the trigger button.
`wrapperRef` bindable	`HTMLDivElement`		The DOM reference of the element wrapping the trigger and its input.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`inputElement` bindable	`HTMLInputElement`		The DOM reference of the underlying input element.
`inputProps`	`HTMLInputAttributes`		HTML attributes for the underlying input element. Give it a `name` to submit the value with a form.
`popupLabel`	`string`	`'Choose a date'`	The accessible name of the popup, which is announced as a dialog.
Element Attributes (`button`)