DateTimePicker
날짜와 시각을 함께 선택. 시간대 표시.
- 라이브러리 전용
개요
미리보기
예시
상태
비어 있음
날짜만
날짜와 시각
다른 시간대
오류
비활성
이렇게 · 이렇게 하지 않기
- 이렇게 시각이 의미 있을 때만 쓴다.
- 이렇게 시간대를 항상 보여준다.
- 이렇게 12/24시간 표기는 사용자 언어를 따른다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
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를 쓴다. |
defaultValue? | string | | 비제어 초기 값(YYYY-MM-DDTHH:mm, timeZone의 벽시계 시각). 날짜만 줘도 된다. |
min? | string | | 고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled. |
max? | string | | 고를 수 있는 가장 늦은 날짜(YYYY-MM-DD). |
timeZone? | string | Asia/Seoul | 시각의 IANA 시간대. 항상 “시간대: 대한민국 표준시 (Asia/Seoul)”처럼 보인다. |
step? | 60 | 900 | 60 | 시각 간격(초). 900이면 15분 단위. |
weekStart? | 'locale' | 'monday' | 'sunday' | locale | locale은 CLDR 주 시작(ko·en 일요일, zh·es 월요일). 서버와 브라우저가 같은 결과를 내도록 고정 표를 쓴다. |
today? | string | 2026-10-19 | 고정된 “오늘”(YYYY-MM-DD). 테스트·카탈로그용. 비우면 timeZone의 실제 날짜. |
holidays? | { date: string; name: string }[] | — | 사용자 지역의 공휴일. 기본은 없음(KR을 강제하지 않는다). 이름은 날짜의 접근 이름과 달력 아래 목록에 들어간다. |
onValueChange(value, parts) | — | — | 둘 다 정해지면 YYYY-MM-DDTHH:mm, 아니면 null. parts에 date·time·timeZone이 함께 온다. |
| 그 밖의 속성 | — | — | id, aria-* 등은 바깥 <div>로 간다. |
접근성
키보드: 달력 격자(roving) → Tab → 시각 입력(네이티브). 격자: 격자는 Tab 정지점 하나. ←→ 하루 · ↑↓ 한 주 · Home/End 주의 처음/끝 · PageUp/PageDown 이전/다음 달 · Shift+PageUp/PageDown 이전/다음 해 · Enter·Space 선택. 월·연 제목 버튼은 월/연 격자로 바꾸고 Esc로 돌아온다.
- <fieldset><legend>로 묶는다. 달력 묶음 이름은 “날짜”, 시각 입력 라벨은 “시각”. 시간대 줄은 시각 입력의 aria-describedby.
- aria-describedby 순서는 도움말 → 오류. 오류가 있으면 aria-invalid="true".