Date Picker

A date picker component with range and presets.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/datepicker.json

Usage

A date picker built from Popover and Calendar. See also the shadcn/ui Date Picker guide.

import {
  DatePicker,
  DatePickerWithRange,
} from "@/components/datepicker/datepicker";

export function Example() {
  return (
    <div className="flex flex-col gap-4">
      <DatePicker />
      <DatePickerWithRange />
    </div>
  );
}

Composition:

Popover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Use captionLayout="dropdown" for date-of-birth style month/year dropdowns. Pair with fromYear / toYear (mapped to calendar startMonth / endMonth) to bound selectable years.