Neumorphism UI

Calendar

날짜나 기간을 고르는 달력이 페이지에 계속 보여야 할 때 사용합니다.

미리보기

날짜와 기간 선택

제어 상태의 단일 날짜와 기간 달력을 비교하고 선택 값을 확인하거나 기간을 초기화합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/calendar

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

날짜와 기간 선택

npx shadcn@latest add @neumorphism-ui/calendar @neumorphism-ui/button
Registry JSON

사용법

선택 모드를 고르고 selected와 onSelect를 연결한 뒤 날짜 locale을 전달하세요. 실제 예약·일정 규칙에 맞게 선택 불가 날짜와 월 범위를 정합니다.

"use client";

import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

API 레퍼런스

DayPicker v10의 날짜 계산과 키보드 탐색을 유지합니다. 선택한 날짜는 inset으로, 기간의 중간 날짜는 연결된 표면으로 구분합니다.

컴포넌트속성타입기본값설명
Calendarmode"single" | "multiple" | "range"—날짜 선택 방식을 지정합니다.
Calendarselected / onSelectDate | Date[] | DateRange / callback—선택 값과 변경 콜백을 연결합니다.
Calendardisabled / locale / startMonth / endMonthDayPickerProps—비활성 날짜, 언어, 이동 가능한 월을 지정합니다.

접근성

  • 01

    방향키로 날짜를 이동하고 Enter 또는 Space로 선택합니다.

  • 02

    기간의 시작·끝, 오늘, 비활성 날짜를 별도로 표시합니다. 라이브러리의 접근성 라벨을 유지하세요.