Shadcn Date Picker

There is no DatePicker in components/ui. You compose a Popover trigger with a Calendar in the panel. Click the button, pick a day, format it with date-fns. Use it for a booking, a birthday, a filter, or a schedule.

Usage

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

<Popover>
  <PopoverTrigger
    render={
      <Button
        variant="outline"
        data-empty={!date}
        className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
      />
    }
  >
    {date ? format(date, "PPP") : "Pick a date"}
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0" align="start">
    <Calendar mode="single" selected={date} onSelect={setDate} />
  </PopoverContent>
</Popover>

mode="single" is one day. mode="range" is from/to. Control open if a click should close the panel.

Composition

There is no DatePicker root. The trigger is a Button; the grid is a Calendar.

Basic

A labeled trigger. The button shows PPP once a day is picked.

Range Picker

mode="range" and numberOfMonths={2}. Keep the panel open until both ends are set.

Date of Birth

captionLayout="dropdown" for month and year. Close open in onSelect so a birthday is one click.

Input

Type the date. Arrow Down opens the calendar. The icon lives in an Input Group.

Time Picker

A date field plus type="time". The calendar does not pick a clock — the native input does.

Natural Language Picker

chrono-node parseDate turns “in 2 days” or “next Friday” into a Date. The calendar stays in sync.

RTL

Wrap with DirectionProvider and dir="rtl". Pass a DayPicker locale so month names match the reading direction.

API

These are Calendar props. There is no DatePicker export.

Popover

align on PopoverContent defaults to center. Date pickers usually set align="start".

Keyboard

Notes

There is no components/ui/date-picker.tsx. Compose Popover and Calendar.

With other components

Questions

Related