Component

Date Picker

A field-styled trigger button that opens a Calendar in a popover.

Basic

Sizes

sm / md / lg, matching the other form controls.

States

invalid and disabled behave like any other field.

It does not read invalid from an enclosing FormField - set invalid on the picker itself

Min and max dates

minDate and maxDate disable every day outside the range, and month navigation stops at its edges.

Days are compared at midnight, so pass dates without a time of day: a minDate of new Date() carries the current time and disables today itself

Locale

locale formats the selected date on the trigger and the calendar's month and weekday names through Intl.

placeholder is not translated for you - pass your own text alongside locale

Selectable header

interactiveHeader turns the month/year label into a month grid + year list for faster long-range navigation (default is prev/next arrows only).

Controlled

Own the selected Date with value and onChange (value is Date | null).

No date selected

When to use

A single date field inside a form (birthdate, due date, booking date) where a full-time grid should stay hidden until needed.

When not to use

A page where the date grid is the primary content and should always be visible - use Calendar directly.
Selecting a range of dates - not currently supported by either Calendar or Date Picker.

Keyboard

Key	Action
Enter / Space	Opens the calendar popup from the trigger.
Arrow keys (in the popup)	Same day/week/month navigation as Calendar.
Escape	Closes the popup and returns focus to the trigger.

Mobile behavior

Opens the same Popover-anchored Calendar as desktop rather than swapping to a native date input - keeps behavior and styling consistent across breakpoints.

Accessibility notes

The trigger is a button, so it needs a name like any other control: aria-label, aria-labelledby, or a linked <label>.
Inherits Calendar's date-grid keyboard pattern and Popover's focus-return-to-trigger behavior once composed together.

Common mistakes

Passing minDate={new Date()} - days are compared at midnight, so the current time of day disables today. Pass today's date with no time.
Rendering a raw new Date() as the value in a server-rendered tree - it can format differently on the server and the client and mismatch on hydration.

Known limitations

No typed entry - the date is picked from the calendar, not typed into the trigger.

Related components

Calendar Popover

Criterion	Status	Note
Keyboard support	Supported	Opens via Enter/Space; full Calendar keyboard pattern once open.
Focus management	Supported	Focus returns to the trigger when the popup closes.
Screen reader labels	Partial	Requires an explicit aria-label or <label> on the trigger - not automatic.
Reduced motion	Supported	prefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparency	Supported	prefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layout	Partial	Logical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

API reference

Prop	Type	Default	Description
aria-label	string	None	Accessible name for the trigger button. Required when there is no visible `<label>` for this field.
aria-labelledby	string	None	Points at an existing visible label's id, as an alternative to `aria-label`.
className	string	None	Extra classes merged onto the trigger.
defaultValue	Date \| null	null	Starting selection when uncontrolled.
disabled	boolean	None	Disables the trigger, so the calendar cannot be opened.
interactiveHeader	boolean	false	Makes the popover Calendar's month/year label an interactive chooser (see `Calendar`'s `interactiveHeader`). Defaults to false: a plain header with prev/next arrows only.
invalid	boolean	None	Manually flags the invalid visual/aria state for standalone use. Inside a `FormField`, the field's own invalid state is picked up automatically.
locale	string	"en-US"	BCP 47 tag driving the formatted date and the calendar's names, via `Intl`.
maxDate	Date	None	Latest selectable date; days after it render disabled. Compared by calendar day.
minDate	Date	None	Earliest selectable date; days before it render disabled. Compared by calendar day, so `minDate={new Date()}` keeps today selectable.
onChange	((date: Date) => void)	None	Called with the picked date.
placeholder	string	"Select date"	Text on the trigger while nothing is selected.
size	ComponentSize	"md"	Trigger height, matching `Input` and `Button` at the same size.
today	Date	None	The date the popover Calendar treats as "today" (see `Calendar`'s `today`). Defaults to the visitor's local date, resolved after mount.
value	Date \| null	None	Controlled selection. Pair with `onChange`; omit for uncontrolled.

aria-labelNone

string

Accessible name for the trigger button. Required when there is no visible `<label>` for this field.

aria-labelledbyNone

string

Points at an existing visible label's id, as an alternative to `aria-label`.

classNameNone

string

Extra classes merged onto the trigger.

defaultValuenull

Date | null

Starting selection when uncontrolled.

disabledNone

boolean

Disables the trigger, so the calendar cannot be opened.

interactiveHeaderfalse

boolean

Makes the popover Calendar's month/year label an interactive chooser (see `Calendar`'s `interactiveHeader`). Defaults to false: a plain header with prev/next arrows only.

invalidNone

boolean

Manually flags the invalid visual/aria state for standalone use. Inside a `FormField`, the field's own invalid state is picked up automatically.

locale"en-US"

string

BCP 47 tag driving the formatted date and the calendar's names, via `Intl`.

maxDateNone

Date

Latest selectable date; days after it render disabled. Compared by calendar day.

minDateNone

Date

Earliest selectable date; days before it render disabled. Compared by calendar day, so `minDate={new Date()}` keeps today selectable.

onChangeNone

((date: Date) => void)

Called with the picked date.

placeholder"Select date"

string

Text on the trigger while nothing is selected.

size"md"

ComponentSize

Trigger height, matching `Input` and `Button` at the same size.

todayNone

Date

The date the popover Calendar treats as "today" (see `Calendar`'s `today`). Defaults to the visitor's local date, resolved after mount.

valueNone

Date | null

Controlled selection. Pair with `onChange`; omit for uncontrolled.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent