Date Picker
Date Picker
A button trigger showing the formatted date, opening a Popover with a Calendar — MUI-style month/year dropdown navigation built in.
import { DatePicker } from "@pompeitech/vesuvius-ui";Default
With a default value
Disabled
API
DatePicker
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | Date | Controlled/uncontrolled selected date. | |
onChange | (date: Date | undefined) => void | ||
placeholder | string | "Pick a date" | Shown on the trigger when nothing's selected. |
dateFormat | string | "PPP" | A date-fns format string, controlling the trigger's displayed text. |
disabled | boolean | false | |
fromYear / toYear | number | Bounds for the year dropdown. |
Plus every native prop of the underlying trigger button.
Accessibility
The trigger is a real button announcing the currently selected date (or the placeholder) as its text content — no separate aria-label needed. Once open, the calendar grid follows the same keyboard model as Calendar itself (arrow keys move by day, Enter selects).