Calendar
A date field component that allows users to enter and edit dates.
Basic Calendar
Selected: Thu Jan 08 2026
Date Range
Select a range of dates.
Range: Thu Jan 08 2026 - Thu Jan 15 2026
Disabled Dates
Disable past dates or specific dates.
Usage
import { Calendar } from "@/components/ui/calendar"
const [date, setDate] = React.useState<Date | undefined>(new Date())
{/* Single date */}
<Calendar
mode="single"
selected={date}
onSelect={setDate}
/>
{/* Date range */}
<Calendar
mode="range"
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
/>
{/* Disabled dates */}
<Calendar
mode="single"
disabled={(date) => date < new Date()}
/>