Date Input

사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 컴포넌트입니다. 단일 필드, 다중 필드(년/월/일 분리), 범위 필드 세 가지 유형을 제공합니다.

생년월일

YYYY-MM-DD 형식으로 입력해주세요

설치

사용법

DateInput, DateInputMultiple, DateInputRange를 import하여 사용합니다.

예제

단일 필드

하나의 입력 필드에 전체 날짜를 입력합니다. 사용자가 이미 알고 있는 날짜를 입력받을 때 유용합니다.

달력 버튼

showCalendarButton으로 달력 아이콘 버튼을 표시합니다. 클릭하면 내장 달력이 나타납니다.

예약 날짜

다중 필드

년, 월, 일 정보를 개별 입력 필드를 통해 입력합니다.

여권 만료일

여권에 표기된 만료일을 입력해주세요

년

월

일

년/월만 입력

hideDay를 사용하여 일 필드를 숨기고 년/월만 입력받습니다.

년

월

범위 필드 (달력으로 범위 선택)

시작일과 종료일을 입력합니다. 달력 아이콘을 클릭하면 범위 선택 달력이 나타나며, 첫 번째 클릭으로 시작일, 두 번째 클릭으로 종료일을 선택할 수 있습니다.

검색 기간

조회하고자 하는 기간을 선택해주세요

필수 입력

required 속성으로 필수 입력 필드임을 표시합니다.

예약 날짜*

예약 날짜는 필수입니다

에러 상태

hasError와 errorMessage를 함께 사용하여 유효성 검사 실패를 표시합니다.