Date Picker

날짜·기간을 선택하는 Date Picker 컴포넌트입니다. 네이티브 <input type="date">와 커스텀 트리거·캘린더 패널 date_picker 두 가지 유형을 제공합니다. Calendar 컴포넌트와 조합해 팝오버·인라인·기간 선택 UI를 구성합니다.

유형

네이티브 input type="date"는 브라우저 기본 UI를 사용합니다. date_picker는 읽기 전용 입력과 캘린더 아이콘 버튼으로 트리거하고, date_picker_panel에 Calendar를 배치합니다.

네이티브 — input type="date"

간단한 폼·모바일 환경에 적합합니다.

커스텀 — date_picker

커스텀 캘린더·기간 선택·푸터 액션 등 확장 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·아이콘 크기를 조절합니다.

Small

Medium

Large

패널 열림

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	타입	기본값	설명
`model-value`	string	—	제어 날짜 문자열. v-model 바인딩
`default-value`	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	지우기 버튼
`panel-wide`	boolean	false	넓은 패널 (date_picker_panel-wide)
`input-id`	string	—	입력 필드 id (label for 연결)
`aria-label`	string	—	입력 접근성 라벨
`aria-invalid`	boolean \| string	—	입력 aria-invalid
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

panel 슬롯에 Calendar 컴포넌트를 배치합니다. 날짜 선택 로직은 앱에서 구현합니다.

API · Slots

슬롯	설명
`panel`	캘린더 패널 (Calendar 등)

API · Events

이벤트	설명
`update:modelValue`	지우기 버튼으로 값이 초기화될 때 (v-model)
`clear`	지우기 버튼 클릭 시. MouseEvent 전달
`calendar-click`	캘린더 버튼 클릭 시. MouseEvent 전달

클래스 · 속성

Vue 컴포넌트가 렌더하는 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	캘린더 버튼·아이콘