Date Picker

A date picker built on Radix UI Popover and react-day-picker. The popup opens below the trigger and shows a calendar for single date selection.

date-picker-demo.app

Installation

terminal.sh

npx y2kui@latest add date-picker

Usage

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

<DatePicker>
  <DatePicker.Trigger />
  <DatePicker.Content />
</DatePicker>

Props

DatePicker

Prop	Type	Default	Description
`value`	Date	—	Controlled selected date.
`onValueChange`	(date: Date \| undefined) => void	—	Called when a date is selected.
`defaultValue`	Date	—	Initial selected date.

DatePicker.Trigger

Prop	Type	Default	Description
`placeholder`	string	`"Pick a date"`	Placeholder text when no date is selected.
`formatStr`	string	`"PPP"`	Date format string (date-fns).

DatePicker.Content

Accepts all Calendar props except mode, selected, and onSelect (managed internally).

Prop	Type	Default	Description
`disabled`	Matcher	—	Disabled dates predicate.
`numberOfMonths`	number	`1`	Number of months to display.
`showOutsideDays`	boolean	`true`	Show days from adjacent months.