Calendar
A date field component that allows users to enter and edit date.
A date field component that allows users to enter and edit date.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
See all calendar blocks in the Blocks Library page.
import { Calendar } from "@/components/ui/calendar";const [date, setDate] = React.useState<Date | undefined>(new Date());
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg border"
/>
);See the React DayPicker documentation for more information.
You can animate the calendar by adding the animate prop.
<Calendar
animate
mode="single"
/>| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|