HTML 날짜 입력 — input type=date 완전 정리

 

 

Web Development · HTML Form

HTML 날짜 입력 —
input type="date" 완전 정리

예약·조회·생일 폼의 표준 · time, week, month까지

시작 오늘 분석할 코드

예약 시스템에서 "시작 날짜 ~ 종료 날짜"를 받는 가장 단순한 코드. 한 줄짜리 HTML이지만 브라우저가 완전한 캘린더 UI를 자동으로 만들어준다.

<form> <h3>조회기간 선택</h3> <label><input type="date" id="start"></label> <label><input type="date" id="end"></label> </form>

실제 출력 결과

조회기간 선택

용어 용어 정리

type=date날짜만 선택 (yyyy-mm-dd)

type=time시간만 선택 (hh:mm)

type=datetime-local날짜 + 시간

type=month월 단위

type=week주 단위

캘린더 피커브라우저 자동 제공 UI

---

1 input type="date"의 동작

type="date"를 지정하면 브라우저가 OS 기본 캘린더 UI를 자동으로 띄운다. JavaScript 라이브러리 없이도 날짜 입력 폼이 완성된다.

※ 브라우저별로 모양이 살짝 다르다 (Chrome·Edge·Firefox·Safari 각자 캘린더 UI). 모바일에서는 OS의 휠 형태 데이트 피커가 뜬다.

데이터 형식 — ISO 8601

<input type="date" value="2026-05-01"> │ └─ 항상 yyyy-mm-dd 형식 (한국식 2026.05.01 X)

※ 화면 표시는 브라우저가 사용자 지역(한국이면 2026. 05. 01.)에 맞춰 보여주지만, 실제 값은 항상 yyyy-mm-dd. 서버로도 이 형식으로 전송됨.

---

2 날짜 관련 input type 5종

type	형식	예시값	용도
date	yyyy-mm-dd	2026-05-01	날짜만 (생일, 예약일)
time	hh:mm	14:30	시간만 (예약 시간)
datetime-local	yyyy-mm-ddThh:mm	2026-05-01T14:30	날짜+시간
month	yyyy-mm	2026-05	월 단위 (요금 청구월)
week	yyyy-W##	2026-W18	주 단위 (주간 일정)

---

3 min · max로 선택 범위 제한

특정 기간만 선택 가능하게 하려면 min과 max를 사용한다.

<!-- 2026년 1월~12월만 선택 --> <input type="date" min="2026-01-01" max="2026-12-31"> <!-- 오늘 이후만 (예약 폼) --> <input type="date" min="2026-05-01"> <!-- 18세 이상 생일만 --> <input type="date" max="2008-05-01">

※ 실무 활용

• 예약: min을 오늘 날짜로 → 과거 선택 차단
• 생일: max를 18년 전으로 → 미성년 가입 차단
• 유효기간: min=내일 → 만료된 날짜 차단

---

4 시작 ~ 종료 — 두 입력 연동

이번 코드처럼 "기간"을 받을 때, 두 input이 자동으로 연동되지는 않는다. JS로 직접 처리해야 한다.

// JavaScript: 시작일 변경 시 종료일 min을 시작일로 갱신 const start = document.getElementById("start"); const end = document.getElementById("end"); start.addEventListener("change", () => { end.min = start.value; // 종료일은 시작일 이후만 });

※ HTML만으로는 "시작 날짜 < 종료 날짜" 같은 검증이 불가능. JS·서버 검증 필요.

---

반응형

5 한국어 표시 형식 vs 실제 값

사용자에게는 "2026. 05. 01." 식으로 보여줘도, JS로 값을 읽으면 항상 "2026-05-01" 형식이다.

// 사용자 화면: 2026. 05. 01. // JS가 읽는 값: const dateInput = document.getElementById("start"); console.log(dateInput.value); // "2026-05-01" console.log(dateInput.valueAsDate); // Date 객체 → JS에서 다양한 조작 가능

---

6 한계 — 디자인 자유도

type="date"의 가장 큰 단점은 캘린더 UI를 CSS로 자유롭게 꾸미기 어렵다는 점. OS·브라우저가 그리는 영역이라 거의 손댈 수 없다.

type="date" 사용

간편 + 무료
접근성 자동
모바일 최적화
디자인 제약 ↑

JS 라이브러리

자유로운 디자인
고급 기능 (범위·날짜 비활성)
설치·학습 비용
예: Flatpickr, react-datepicker

---

7 자주 하는 실수

실수	증상	해결
value를 "2026.05.01"	인식 안 됨	yyyy-mm-dd 형식
min/max 형식 불일치	제한 안 먹음	type과 같은 형식
시작·종료 검증 누락	시작>종료 가능	JS·서버 검증
옛 IE 지원 기대	일반 텍스트박스로 표시	대체 라이브러리 또는 폴리필
type 표기 오타	일반 텍스트로 표시	"date" 정확히

---

핵심 한 줄 요약

type="date"캘린더 UI 자동 제공

값 형식항상 yyyy-mm-dd (ISO 8601)

type=time시간만 (hh:mm)

datetime-local날짜+시간 함께

min / max선택 가능 날짜 범위 제한

시작~종료JS로 연동 검증 필요

디자인 한계자유도 원하면 JS 라이브러리

Tags

#date #input #type=date #time #datetime-local #HTML #날짜선택 #캘린더 #예약폼 #min #max #폼 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

date, input, type=date, time, datetime-local, HTML, 날짜선택, 캘린더, 예약폼, min, max, 폼, 웹개발, 티스토리