Calendar
A date field component that allows users to select dates and date ranges.
April 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
npm i react-day-picker date-fnsUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Calendar } from "@/components/ui/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"
/>
)
}Examples
Range Selection
April 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Disabled Dates
Disabled Date Range
April 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Props
| Name | Type | Description |
|---|---|---|
| mode | "single" | "range" | "multiple" | The selection mode of the calendar. |
| selected | Date | {from: Date, to: Date} | Date[] | undefined | The selected date or range. |
| onSelect | function | Callback function when a date is selected. |
| disabled | DateRange | Date[] | DisabledDays | Days that are disabled and cannot be selected. |
| initialFocus | boolean | Whether to focus the calendar on initial render. |
| numberOfMonths | number | Number of months to display. |
| fromMonth | Date | The minimum month to display. |
| toMonth | Date | The maximum month to display. |
| showOutsideDays | boolean | Whether to show days from the previous and next months. |