Date Picker
날짜·기간을 선택하는 Date Picker 컴포넌트입니다. 네이티브 <input type="date">와 커스텀 트리거·캘린더 패널 date_picker 두 가지 유형을 제공합니다.
유형
네이티브 input type="date"는 브라우저 기본 UI를 사용합니다. date_picker는 읽기 전용 입력과 캘린더 아이콘 버튼으로 트리거하고, date_picker_panel에 Calendar를 배치합니다.
간단한 폼·모바일 환경에 적합합니다.
커스텀 캘린더·기간 선택·푸터 액션 등 확장 UI에 사용합니다.
기본
form_field와 date_picker를 조합한 단일 날짜 선택 필드입니다. date_picker_trigger 안에 date_picker_input · date_picker_btn을 배치합니다.
체크인 날짜를 선택해 주세요.
크기
date_picker_sm · date_picker(기본) · date_picker_lg로 트리거 padding·font-size·아이콘 크기를 조절합니다.
패널 열림
is-open 클래스와 aria-expanded="true"로 캘린더 패널이 열린 상태를 표현합니다. date_picker_panel에는 calendar_no-header · calendar_compact를 사용합니다.
푸터 액션
calendar_footer로 오늘 · 초기화 · 확인 버튼을 제공합니다. 날짜 확정이 필요한 폼에 사용합니다.
기간 선택
date_picker_range로 시작·종료 date_picker를 나란히 배치합니다. date_picker_sep로 구분 기호를 표시합니다.
최대 90일까지 조회할 수 있습니다.
이중 캘린더 패널
date_picker_panel-wide에 calendar_group을 배치해 두 달을 한 패널에서 기간을 선택합니다.
인라인
date_picker_inline은 트리거를 숨기고 캘린더를 항상 표시합니다. 사이드 패널·필터 영역 등에 적합합니다.
값 초기화
date_picker_clear 버튼으로 선택된 날짜를 지울 수 있습니다. 입력 필드와 캘린더 아이콘 사이에 배치합니다.
상태
is-disabled · is-error · is-success · date_picker_placeholder로 입력 상태를 표현합니다. 오류·성공 메시지는 form_field-error · form_field-success와 함께 사용합니다.
is-disabled 클래스와 disabled 속성으로 선택을 막습니다.
날짜를 선택해 주세요.
예약 가능한 날짜입니다.
조합 예시
form_inline과 date_picker_range를 조합한 검색 필터 폼입니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | string | — | 제어 날짜 문자열 |
defaultValue | string | — | 비제어 초기 날짜 문자열 |
placeholder | string | — | 미선택 placeholder |
size | 'sm' | 'md' | 'lg' | md | date_picker_sm · date_picker_lg |
disabled | boolean | false | 비활성 (is-disabled) |
error | boolean | false | 오류 (is-error) |
success | boolean | false | 성공 (is-success) |
open | boolean | false | 패널 열림 (is-open) |
fit | boolean | false | 콘텐츠 너비 (date_picker_fit) |
block | boolean | false | 부모 너비 100% |
inline | boolean | false | 트리거 없이 패널만 (date_picker_inline) |
clearable | boolean | false | 지우기 버튼 |
panelWide | boolean | false | 넓은 패널 (date_picker_panel-wide) |
inputId | string | — | 입력 필드 id (label for 연결) |
ariaLabel | string | — | 입력 접근성 라벨 |
ariaInvalid | boolean | string | — | 입력 aria-invalid |
className | string | — | date_picker 루트에 추가 클래스 |
panel | ReactNode | — | 패널 콘텐츠 (children 대체) |
onClear | (event) => void | — | 지우기 버튼 클릭 콜백 |
onCalendarClick | (event) => void | — | 캘린더 버튼 클릭 콜백 |
ripple | boolean | true | 클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성 |
panel 슬롯에 Calendar 컴포넌트를 배치합니다. 날짜 선택 로직은 앱에서 구현합니다.
API · Children
| Children | 설명 |
|---|---|
panel | 캘린더 패널 콘텐츠 (Vue #panel 슬롯 대응) |
children | panel prop 대체. Calendar 등 패널 콘텐츠 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
date_picker | 루트 |
date_picker_sm · date_picker_lg · date_picker_fit · date_picker_block | 크기·너비 |
date_picker_inline | 인라인 패널 |
date_picker_trigger · date_picker_input · date_picker_btn | 트리거 영역 |
date_picker_clear · date_picker_placeholder | 지우기(data-ripple="surface")·placeholder |
date_picker_panel · date_picker_panel-wide | 드롭다운 패널 |
is-open · is-error · is-success · is-disabled | 상태 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--date-picker-input-padding-y · --date-picker-input-padding-x | 0.5rem · 0.75rem | 입력 패딩 |
--date-picker-btn-size · --date-picker-icon-size | 2.25rem · 1rem | 캘린더 버튼·아이콘 |