DateText
4개 언어 날짜·시각 표기. 올해는 연도 생략.
- 출시 화면에서 사용
개요
미리보기
예시
상태
날짜
날짜와 시각
지난해
기간
–시간대 표시
다른 시간대
쓰임 예
출처 줄
연도 항상
이렇게 · 이렇게 하지 않기
- 이렇게 모든 날짜는 DateText로 쓴다. 형식은 3월 4일 14:20 / Mar 4, 2:20 PM / 3月4日 14:20 / 4 mar, 14:20이고 올해는 연도를 생략한다.
- 이렇게 기계용 값은 <time datetime>에 둔다.
- 이렇게 하지 않기 “3/4”처럼 모호한 숫자 날짜나 손으로 이어 붙인 문자열을 쓰지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | string | 2026-03-04T14:20:00+09:00 | YYYY-MM-DD 또는 ISO 날짜·시각. 시각에는 오프셋(Z, +09:00)을 붙인다. 없으면 timeZone의 벽시계 시각으로 읽는다. |
kind? | 'date' | 'datetime' | 'range' | date | date “3월 4일” · datetime “3월 4일 14:20” · range는 value–end. |
end? | string | | 기간의 끝(kind="range"). value와 같은 형식. |
year? | 'auto' | 'always' | auto | auto는 올해면 연도를 생략한다. always는 항상 쓴다. |
timeZone? | string | Asia/Seoul | 시각을 보여줄 IANA 시간대이자 “올해” 판단 기준. 기본 Asia/Seoul. |
showZone? | boolean | false | 시각 뒤에 시간대 이름(“대한민국 표준시”)을 붙인다. 읽는 사람이 다른 시간대에 있을 수 있을 때. |
now? | string | | 고정된 “지금”(ISO). 테스트·카탈로그용. 비우면 실제 시계. |
kind="range" | — | — | 시작·끝을 따로 형식화해 각자 <time datetime>으로 감싸고 고정 구분자로 잇는다: ko·zh “9월 2일–9월 20일”, en·es “Sep 2 – Sep 20”. Intl formatRange는 Node와 브라우저 출력이 달라 쓰지 않는다(하이드레이션). |
| 그 밖의 속성 | — | — | id, aria-* 등 <span> 속성을 전달한다. className·style은 받지 않는다. |
접근성
키보드: 대화형 아님. 초점을 받지 않는다.
- 스크린리더는 보이는 글자를 읽는다. 그래서 보이는 글자에 모호한 축약을 쓰지 않는다.
- 시간대 이름은 Intl이 로캘 위치에 넣는다(zh는 시각 앞).