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 />

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

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. Unless `min` is given, the native input accepts no earlier date.
`maxYear`	`number`	`Current + 100`	The last year offered by the year column. Unless `max` is given, the native input accepts no later date.
`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	`HTMLInputElement` \| `null`		The DOM reference of the native date input that holds the value. The other attributes of the picker are applied to it.
`buttonRef` bindable	`HTMLButtonElement` \| `null`		The DOM reference of the button that opens the picker.
`buttonAttributes`	`HTMLButtonAttributes`		The attributes to spread on the button that opens the picker.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		The DOM reference of the element wrapping the button and the native input.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`popupLabel`	`string`	`'Choose a date'`	The accessible name of the popup, which is announced as a dialog.
`columnLabels`	`{ month?: string; day?: string; year?: string }`	`{ month: 'Month', day: 'Day', year: 'Year' }`	The names of the month, day and year columns: shown on the trigger while there is no date, and given to the lists of the popup.
`NativeFieldAttributes<HTMLInputAttributes>`