Props
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | Date | null | — | 선택된 날짜-시간 값 |
onChange | (dateTime: Date | null) => void | — | 값이 변경될 때 호출되는 콜백 |
time | TimeConfig | — | 시간 패널 설정 |
minDate | Date | — | 선택 가능한 최소 날짜 |
maxDate | Date | — | 선택 가능한 최대 날짜 |
locale | Partial<Locale> | — | 사용자 정의 로케일 설정 |
initialMonth | Date | — | 초기에 표시될 월 |
size | "small" | "medium" | "large" | "x-large" | "medium" | 컴포넌트 크기 |
weekStartsOn | WeekDay | "sunday" | 주의 첫 번째 요일 |
isDateUnavailable | (date: Date) => boolean | — | 날짜를 비활성화로 표시 |
displayFormat | string | — | 사용자 정의 표시 형식 |
open | boolean | — | 제어되는 열림 상태 |
initialOpen | boolean | — | 초기 열림 상태 (비제어) |
onOpenChange | (open: boolean) => void | — | 열림 상태가 변경될 때 호출되는 콜백 |
required | boolean | false | 값 지우기 비활성화 |
showOutsideDays | boolean | false | 인접한 달의 날짜 표시 |
highlightDates | Date[] | — | 강조할 날짜 |
shouldCloseOnSelect | boolean | false | 프리셋 클릭 시 자동 확인 |
numberOfMonths | number | 1 | 표시할 월 개수 |
captionLayout | "buttons" | "dropdown" | "buttons" | 캡션 탐색 스타일 |
fromYear | number | — | 드롭다운 시작 연도 |
toYear | number | — | 드롭다운 종료 연도 |
disablePast | boolean | false | 오늘 이전 날짜 비활성화 |
disableFuture | boolean | false | 오늘 이후 날짜 비활성화 |
inline | boolean | false | 캘린더를 인라인으로 표시 (팝업 없음) |
name | string | — | 폼 제출을 위한 숨겨진 input의 name |
placeholder | string | — | 트리거의 placeholder 텍스트 |
hideHeader | boolean | false | 탐색 헤더 숨기기 |
hideFooter | boolean | false | 액션 푸터 숨기기 |
TimeConfig
interface TimeConfig { /** 시간 표시 정밀도. 기본값: "minute". */ precision?: "hour" | "minute" | "second"; /** 12시간 또는 24시간 형식. 기본값: "24". */ hourFormat?: "12" | "24"; /** 분 증가 단계. 기본값: 5. */ minuteStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30; /** 초 증가 단계. 기본값: 1. */ secondStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30; /** 각 스크롤 휠 아이템의 높이 (px). 기본값: 32. */ itemHeight?: number;}