Components

DatePicker

Overview

DatePicker는 react-datepicker 위에 Trigger를 합성하는 입력입니다. default는 아이콘 + 날짜/format 트리거입니다. 커스텀은 asChild만 쓰면 됩니다. mode="duration"으로 한 피커에서 시작일 → 종료일을 고를 수 있습니다.

Trigger

default: 아이콘 + 날짜/format. asChild: 커스텀 트리거. 값 없으면 format 플레이스홀더.

default아이콘 + 날짜/format.
asChild자식 엘리먼트에 open 토글 병합.

default

asChild

Validation

필수 누락 등 검증 실패 시 invalid · error. 트리거 에러 보더 + 메시지( DatePickerError 또는 FieldError ).

invalid에러 보더 · aria-invalid.
error메시지. Context + 자동/슬롯 표시.
children검증 메시지 슬롯. DatePickerError 엘리먼트에 children으로 에러 메시지 전달.

error prop (자동 메시지)

필수 항목입니다.

DatePickerError children

필수 항목입니다.

Field + FieldLabel + FieldError

예약일

필수 항목입니다.

View

일 단위 달력 또는 월 단위 피커.

day기본. 일 선택 (format 예: yyyy.MM.dd).
month월 선택 (format 예: yyyy.MM).

view="day"

view="month"

Side

input 기준 캘린더 열림 방향 (위 / 아래 / 왼 / 오). 브라우저를 기준으로 잘리지 않는 방향으로 넣습니다.

bottom기본. 트리거 아래.
top트리거 위.
left트리거 왼쪽.
right트리거 오른쪽.

side="bottom"

side="top"

side="left"

side="right"

Duration

mode="duration". start → end 순 선택. 기간 비즈니스 규칙(최대 조회·end ≥ start)은 앱 권장 처리(강제 아님).

mode기간 선택 모드.
durationDate | null 각각.
start 재설정시작일 다시 고르면 종료일을 최대 조회 기간 상한으로 재설정 (또는 구간 초기화).
end ≥ start종료일이 시작일보다 앞설 수 없게 minDate/disabled 처리 권장. 강제 API 아님.

mode="duration"