Calendar

날짜를 선택할 수 있는 캘린더 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add calendar

사용법

TSX

import { Calendar, DatePicker } from "@msub-core/ui/components/calendar"

function MyComponent() {
  const [date, setDate] = React.useState<Date | undefined>()

  return (
    <Calendar
      value={date}
      onValueChange={setDate}
    />
  )
}

Calendar

2025년 12월

일

월

화

수

목

금

토

선택된 날짜: (없음)

Prop	Type	Default	Required	Description
value	Date \| undefined	-	No	제어 모드 선택 날짜
defaultValue	Date	-	No	기본 선택 날짜
onValueChange	(date: Date \| undefined) => void	-	No	날짜 변경 콜백
minDate	Date	-	No	선택 가능한 최소 날짜
maxDate	Date	-	No	선택 가능한 최대 날짜
disabled	boolean	false	No	비활성화 상태

DatePicker

날짜 선택

선택된 날짜: (없음)

Prop	Type	Default	Required	Description
label	string	-	No	레이블 텍스트
placeholder	string	"날짜를 선택하세요"	No	플레이스홀더
format	(date: Date) => string	-	No	날짜 포맷 함수
error	string	-	No	에러 메시지

날짜 범위 제한

2025년 12월

일

월

화

수

목

금

토

과거 7일 ~ 미래 30일까지만 선택 가능합니다.

에러 상태

생년월일

날짜를 선택해주세요

비활성화

날짜