DatePicker
Single date picker with month/year navigation and clearable value
Preview
Usage
import { DatePicker } from "@/components/ui/date-picker"
import { useState } from "react"
function DatePickerDemo() {
const [date, setDate] = useState<Date | undefined>()
return (
<DatePicker
value={date}
onChange={setDate}
placeholder="Pick a date"
clearable
/>
)
}Features month/year dropdown selectors, a "Today" shortcut button, and an optional clear button. Accepts both Date objects and ISO date strings as value. Use fromYear and toYear to control the year range. Pass a locale from date-fns/locale for localization.
Install
npx shadcn add @bonsai/date-picker