Docs
Calendar
Calendar
A date field component that allows users to enter and edit date.
January 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
'use client'
import * as React from 'react'
import { Calendar } from 'ui'
export function CalendarDemo() {
const [date, setDate] = React.useState<Date | undefined>(new Date())
return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
}About
The Calendar component is built on top of React DayPicker.
Installation
npx shadcn-ui@latest add calendarUsage
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" />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.