1Sponsor

Date Picker

Calendar date picker with keyboard navigation

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/date-picker.json

Usage

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker
  label="Birth date"
  value={new Date(2026, 0, 15)}
  onChange={(date) => console.log("Selected:", date)}
  onSubmit={(date) => console.log("Submitted:", date)}
/>

API Reference

DatePicker

PropTypeDefault
valueDateundefined
onChange(date: Date) => voidundefined
onSubmit(date: Date) => voidundefined
labelstringundefined
minDateDateundefined
maxDateDateundefined
autoFocusbooleanfalse
idstringundefined