Components

Date Picker

new

A date field built from Popover, Calendar and Button.

Installation

There is no date picker to install. It is a composition of three components you add once and arrange per screen:

npx shadcn@latest add @blank/popover @blank/calendar @blank/button

Formatting uses date-fns: npm install date-fns.

Usage

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

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

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">
      <CalendarIcon />
      {date ? format(date, "PPP") : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={setDate} />
  </PopoverContent>
</Popover>

Examples

Range

mode="range" with two months. The trigger shows both ends once the second is picked.

Presets

Shortcuts beside the calendar for the dates people actually pick. Drive the visible month yourself so a preset outside it scrolls into view.

In a form

A trigger with a label, a description and month and year dropdowns, for dates far from today.