Calendar

A date field component built on react-day-picker, plus a DatePicker pattern using Calendar + Popover.

Installation

bash
npx shadcn@latest add calendarnpx shadcn@latest add popover

Import

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

Basic Calendar

export function CalendarDemo() {  const [date, setDate] = React.useState<Date | undefined>(new Date())  return (    <Calendar      mode="single"      selected={date}      onSelect={setDate}      className="rounded-md border"    />  )}

DatePicker (Calendar + Popover)

import { format } from "date-fns"import { CalendarIcon } from "lucide-react"import { cn } from "@/lib/utils"export function DatePickerDemo() {  const [date, setDate] = React.useState<Date>()  return (    <Popover>      <PopoverTrigger asChild>        <Button          variant="outline"          className={cn(            "w-[280px] justify-start text-left font-normal",            !date && "text-muted-foreground"          )}        >          <CalendarIcon className="mr-2 h-4 w-4" />          {date ? format(date, "PPP") : <span>Pick a date</span>}        </Button>      </PopoverTrigger>      <PopoverContent className="w-auto p-0">        <Calendar          mode="single"          selected={date}          onSelect={setDate}          initialFocus        />      </PopoverContent>    </Popover>  )}

Date range picker

import { DateRange } from "react-day-picker"export function DateRangePicker() {  const [date, setDate] = React.useState<DateRange | undefined>({    from: new Date(2024, 0, 20),    to: new Date(2024, 0, 25),  })  return (    <Calendar      mode="range"      defaultMonth={date?.from}      selected={date}      onSelect={setDate}      numberOfMonths={2}      className="rounded-md border"    />  )}

Props

PROPTYPEDEFAULTDESCRIPTION
mode"single" | "multiple" | "range""single"Selection mode
selectedDate | Date[] | DateRange—Controlled selected date(s)
onSelect(date) => void—Called when selection changes
disabledMatcher | Matcher[]—Dates to disable (e.g. past dates)
numberOfMonthsnumber1Number of months to display
initialFocusbooleanfalseFocus the calendar when mounted (useful in popovers)

Notes

  • Calendar is built on react-day-picker \u2014 all DayPicker props are supported
  • DatePicker is a composition pattern (Calendar + Popover), not a separate component
  • Use date-fns for formatting: format(date, "PPP")