속성

속성타입기본값설명
value{ start: Date | null; end: Date | null }—선택된 날짜 범위 값
onChange(value: { start: Date | null; end: Date | null }) => void—값이 변경될 때 호출되는 콜백
presetsDateRangePreset[]—미리 정의된 날짜 범위 프리셋
maxDaysnumber—범위 내에서 허용되는 최대 일수 (포함)
minDaysnumber—범위 내에서 필요한 최소 일수 (포함)
allowSingleDateInRangebooleantrue시작일과 종료일이 같은 범위를 허용
minDateDate—선택 가능한 최소 날짜
maxDateDate—선택 가능한 최대 날짜
localePartial<Locale>—사용자 정의 로케일 설정
initialMonthDate—초기에 표시될 월
size"small" | "medium" | "large" | "x-large""medium"컴포넌트 크기
weekStartsOnWeekDay"sunday"한 주의 시작 요일
isDateUnavailable(date: Date) => boolean—날짜를 비활성화로 표시
displayFormatstring—사용자 정의 표시 형식 (예: "YYYY/MM/DD")
openboolean—제어되는 열림 상태
initialOpenboolean—초기 열림 상태 (비제어)
onOpenChange(open: boolean) => void—열림 상태가 변경될 때 호출되는 콜백
requiredbooleanfalse값 지우기 비활성화
showOutsideDaysbooleanfalse인접한 달의 날짜 표시
highlightDatesDate[]—강조할 날짜
shouldCloseOnSelectbooleanfalse종료일 선택 시 자동 확인
numberOfMonthsnumber2표시할 월 개수
captionLayout"buttons" | "dropdown""buttons"캡션 탐색 스타일
fromYearnumber—드롭다운의 시작 연도
toYearnumber—드롭다운의 종료 연도
disablePastbooleanfalse오늘 이전 날짜 비활성화
disableFuturebooleanfalse오늘 이후 날짜 비활성화
inlinebooleanfalse달력을 인라인으로 표시 (팝업 없음)
namestring—폼 제출을 위한 숨겨진 입력 필드의 이름 (시작일)
endNamestring—종료일을 위한 숨겨진 입력 필드의 이름 (기본값: name-end)
placeholderstring—트리거 플레이스홀더 텍스트
hideHeaderbooleanfalse탐색 헤더 숨기기
hideFooterbooleanfalse액션 푸터 숨기기

DateRangePreset

interface DateRangePreset {
label: string;
value: { start: Date; end: Date } | (() => { start: Date; end: Date });
}