DatePickerInput

입력 필드에서 달력을 열어 날짜 선택.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

리포트 날짜

Format MM/DD/YYYY · e.g. 10/26/2026

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

label

hint

error

requireddisabledreadOnly

defaultValue

value

min

max

name

open

weekStart

timeZone

예시

상태

비어 있음
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
입력됨
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026

열림

리포트 날짜

Format MM/DD/YYYY · e.g. 10/26/2026

Monday, October 19, 2026

형식 오류
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
2026. 10. 19. 형식으로 입력해 주세요.
범위 오류
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
2026년 10월 1일부터 2026년 10월 31일 사이 날짜를 입력해 주세요.
비활성
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026

이렇게 · 이렇게 하지 않기

이렇게 직접 입력과 달력 선택을 모두 허용한다.
이렇게 형식은 사용자 언어를 따르고 도움말에 예시 형식을 쓴다.
이렇게 형식이 틀려도 입력을 지우지 않고 올바른 예를 보여준다.
이렇게 하지 않기 “형식이 맞음”을 초록 체크로 표시하지 않는다. 형식 검사는 사실 확인이 아니다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`리포트 날짜`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`defaultValue?`	`string`		비제어 초기 날짜(YYYY-MM-DD).
`value?`	`string`		제어 값(YYYY-MM-DD). null이면 비어 있음.
`min?`	`string`		고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled.
`max?`	`string`		고를 수 있는 가장 늦은 날짜(YYYY-MM-DD).
`name?`	`string`		폼 이름. 제출 값은 YYYY-MM-DD.
`open?`	`boolean`	`false`	처음부터 달력을 연다(카탈로그·테스트). 이때는 초점을 옮기지 않는다.
`weekStart?`	`'locale' \| 'monday' \| 'sunday'`	`locale`	locale은 CLDR 주 시작(ko·en 일요일, zh·es 월요일). 서버와 브라우저가 같은 결과를 내도록 고정 표를 쓴다.
`timeZone?`	`string`	`Asia/Seoul`	“오늘”을 정하는 IANA 시간대. 기본 Asia/Seoul.
`holidays?`	`{ date: string; name: string }[]`	—	사용자 지역의 공휴일. 기본은 없음(KR을 강제하지 않는다). 이름은 날짜의 접근 이름과 달력 아래 목록에 들어간다.
`onValueChange(value: string \| null)`	—	—	입력·달력·지우기 모두 이 하나로 알린다.
`popover="auto"`	—	—	패널은 네이티브 popover(층 4)라서 바깥 클릭·Esc로 닫히고, 초점은 달력 버튼으로 돌아온다.
그 밖의 속성	—	—	autoFocus, onBlur, aria-* 등은 보이는 <input>으로 간다.

개요

미리보기

예시 언어동작 줄이기

리포트 날짜

Format MM/DD/YYYY · e.g. 10/26/2026

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

label

hint

error

requireddisabledreadOnly

defaultValue

value

min

max

name

open

weekStart

timeZone

예시

상태

비어 있음
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
입력됨
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026

열림

리포트 날짜

Format MM/DD/YYYY · e.g. 10/26/2026

Monday, October 19, 2026

형식 오류
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
2026. 10. 19. 형식으로 입력해 주세요.
범위 오류
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
2026년 10월 1일부터 2026년 10월 31일 사이 날짜를 입력해 주세요.
비활성
리포트 날짜
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`리포트 날짜`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`defaultValue?`	`string`		비제어 초기 날짜(YYYY-MM-DD).
`value?`	`string`		제어 값(YYYY-MM-DD). null이면 비어 있음.
`min?`	`string`		고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled.
`max?`	`string`		고를 수 있는 가장 늦은 날짜(YYYY-MM-DD).
`name?`	`string`		폼 이름. 제출 값은 YYYY-MM-DD.
`open?`	`boolean`	`false`	처음부터 달력을 연다(카탈로그·테스트). 이때는 초점을 옮기지 않는다.
`weekStart?`	`'locale' \| 'monday' \| 'sunday'`	`locale`	locale은 CLDR 주 시작(ko·en 일요일, zh·es 월요일). 서버와 브라우저가 같은 결과를 내도록 고정 표를 쓴다.
`timeZone?`	`string`	`Asia/Seoul`	“오늘”을 정하는 IANA 시간대. 기본 Asia/Seoul.
`holidays?`	`{ date: string; name: string }[]`	—	사용자 지역의 공휴일. 기본은 없음(KR을 강제하지 않는다). 이름은 날짜의 접근 이름과 달력 아래 목록에 들어간다.
`onValueChange(value: string \| null)`	—	—	입력·달력·지우기 모두 이 하나로 알린다.
`popover="auto"`	—	—	패널은 네이티브 popover(층 4)라서 바깥 클릭·Esc로 닫히고, 초점은 달력 버튼으로 돌아온다.
그 밖의 속성	—	—	autoFocus, onBlur, aria-* 등은 보이는 <input>으로 간다.

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기