Calendar

Calendar (캘린더)

사용자가 날짜를 입력하고 수정할 수 있게 해주는 날짜 필드 컴포넌트예요. 현재 날짜를 보여주는 캘린더부터 날짜 선택기까지 다양하게 활용할 수 있어요.

출처: 문서

본문

소개 (About)

Calendar 컴포넌트는 React DayPicker 위에 만들어졌어요.

설치 (Installation)

npx shadcn@latest add calendar

npm install react-day-picker date-fns

사용법 (Usage)

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"
  />
)

더 자세한 내용은 React DayPicker 문서를 참고해요.

날짜 선택기 (Date Picker)

<Calendar> 컴포넌트를 이용하면 날짜 선택기를 만들 수 있어요. 자세한 내용은 Date Picker 페이지를 참고해요.

예시 (Examples)

Form