Date Picker

A Calendar in a Popover, with a trigger whose label cross-fades as you pick. Comes with a range variant and smart presets.

Inputs

Launch date

Pick the day you ship.

Playground

Tweak the props, the preview and the code follow.

Props

variant

locale

placeholder

clearable

presets

disabled

import { DatePicker } from "@/components/ui/date-picker"

<DatePicker
  value={value}
  onChange={setValue}
  placeholder="Pick a date"
/>

npx @plumsydev/plum-ui add date-picker

Also pulls in calendar, popover automatically.

import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"

const [date, setDate] = React.useState<Date>()

<DatePicker value={date} onChange={setDate} />

Presets on the side, two months, and the dashboard numbers roll as the range changes.

Visitors

Signups

Works with Field: invalid state, error message, weekdays only.

Prop	Type	Default
`value` Controlled value.	`Date`	`—`
`defaultValue` Initial value when uncontrolled.	`Date`	`—`
`onChange` Called on select and on clear.	`(date: Date \| undefined) => void`	`—`
`placeholder` Shown when empty.	`string`	`"Pick a date"`
`formatOptions` How the value is displayed.	`Intl.DateTimeFormatOptions`	`{ dateStyle: "medium" }`
`locale` Used for the label and the calendar.	`string`	`"en-US"`
`minDate / maxDate` Bounds passed to the calendar.	`Date`	`—`
`disabledDates` Disable specific days.	`(date: Date) => boolean`	`—`
`clearable` Shows an × to reset the value.	`boolean`	`true`
`align` Popover alignment.	`"start" \| "center" \| "end"`	`"start"`

Same props as DatePicker, with a DateRange value.

Prop	Type	Default
`presets` Shortcuts on the side. Pass `[]` to hide them.	`{ label: string; range: () => DateRange }[]`	`—`
`numberOfMonths` Months shown in the popover.	`1 \| 2`	`2`

The popover closes on its own once a date — or both ends of a range — are picked, after a short beat so you see the selection land.