Docs
Calendar
Calendar
A date field component that allows users to enter and edit date.
May 2023
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
About
The Calendar component is built on top of React DayPicker.
Installation
npx shadcn-ui add calendarnpx shadcn-ui add calendarUsage
import { Calendar } from "@/components/ui/calendar"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-md border"
/>
)const [date, setDate] = React.useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-md border"
/>
)See the React DayPicker documentation for more information.
Date Picker
You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.
React Hook Form
Note: Learn more about using React Hook Form on the docs page.