Loading...
Loading...
> A date picker calendar component for selecting single dates or date ranges.
1import { Calendar } from "@/components/ui/calendar"
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1const [date, setDate] = useState<Date | undefined>(new Date());23<Calendar4 mode="single"5 selected={date}6 onSelect={setDate}7 className="border border-border"8/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1const [date, setDate] = useState<Date>();23<Calendar4 mode="single"5 selected={date}6 onSelect={setDate}7 className="border border-border"8/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1const [range, setRange] = useState<DateRange>();23<Calendar4 mode="range"5 selected={range}6 onSelect={setRange}7 numberOfMonths={2}8 className="border border-border"9/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1const [dates, setDates] = useState<Date[]>();23<Calendar4 mode="multiple"5 selected={dates}6 onSelect={setDates}7 className="border border-border"8/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1<Calendar2 mode="single"3 showOutsideDays={false}4 className="border border-border"5/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1<Calendar2 mode="single"3 disabled={(date) =>4 date < new Date() || date < new Date("1900-01-01")5 }6 className="border border-border"7/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1<Calendar2 mode="single"3 numberOfMonths={2}4 className="border border-border"5/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1<Calendar2 mode="single"3 defaultMonth={new Date(2024, 0)}4 className="border border-border"5/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1<Calendar2 mode="single"3 selected={date}4 onSelect={setDate}5 footer={6 <p className="text-sm text-muted-foreground">7 {date ? `Selected: ${date.toLocaleDateString()}` : "Pick a date"}8 </p>9 }10/>
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "multiple" | "range" | "single" | Selection mode for the calendar. |
| selected | Date | Date[] | DateRange | undefined | The selected date(s) based on mode. |
| onSelect | (date: Date | Date[] | DateRange) => void | undefined | Callback when date selection changes. |
| defaultMonth | Date | new Date() | The month to display initially. |
| numberOfMonths | number | 1 | Number of months to display. |
| showOutsideDays | boolean | true | Show days from previous/next months. |
| disabled | boolean | Date[] | ((date: Date) => boolean) | false | Disable specific dates or all dates. |
| footer | ReactNode | undefined | Custom content to render in the footer. |
| className | string | undefined | Additional CSS classes for the calendar. |