날짜 입력 필드
날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.
사용 지침
신청 기간·예약일 등 정확한 날짜 입력이 필요한 폼에 사용하고, 형식 마스크(YYYY-MM-DD)와 달력 보조 트리거를 함께 제공해 키보드·마우스 사용자를 모두 지원합니다.
예제
기본
힌트 포함
도움말
기본값 포함
제어 상태
입력된 날짜: 2024.12.25
전체 상태
날짜를 선택해주세요.
올바른 날짜를 입력해주세요.
올바른 날짜입니다.
YYYY.MM.DD 형식으로 입력해주세요.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| aria-label | string | — | Defines a string value that labels the current element. @see aria-labelledby. |
| calendarPosition | enum | bottom | — |
| calendarProps | Partial<CalendarProps> | — | — |
| className | string | — | — |
| defaultIsCalendarOpen | boolean | false | — |
| disabled | boolean | — | — |
| error | ReactNode | — | — |
| hint | ReactNode | — | — |
| id | string | — | — |
| information | ReactNode | — | — |
| isCalendarOpen | boolean | — | — |
| label | string | — | — |
| onCalendarOpenChange | ((isOpen: boolean) => void) | — | — |
| onClick | MouseEventHandler<HTMLButtonElement> | — | — |
| onValueChange | ((value: string) => void) | — | — |
| openButtonLabel | string | 달력 열기 | — |
| placeholder | string | YYYY.MM.DD | — |
| readOnly | boolean | false | — |
| size | enum | large | — |
| style | CSSProperties | — | — |
| success | ReactNode | — | — |
| tabIndex | number | — | — |
| value | string | — | — |