HTML <input> 시간 관련 타입 완전 정복: time, month, week, date, datetime-local

웹 폼에서 날짜와 시간을 입력받는 경우는 매우 많습니다. HTML5부터는 사용자 경험과 데이터 일관성을 높이기 위해 다양한 날짜/시간 입력 타입이 추가되었으며, 이들 타입은 기본적인 폼 처리뿐 아니라 예약 시스템, 달력 UI, 시간 기록 등 여러 실무 영역에서 핵심 기능으로 활용됩니다.

이 글은 <input>의 날짜/시간 관련 타입에 대해 기본 구조 → 고급 예제 → 자바스크립트 활용 → 심화 응용 순으로 설명하여 초보자도 글을 다 읽고 나면 준전문가 수준에 이를 수 있도록 구성했습니다.

---

🕒 1. <input type="time"> — 시:분 입력 전용

✅ 기본 개념

• 시간(시:분)을 입력받기 위한 입력 필드
• 초 단위는 입력할 수 없음 (HH:mm 포맷)
• 기본적으로 사용자의 로컬 시간대를 따름

✅ 기본 사용 예

<label>예약 시간:</label>
<input type="time" name="appointment" />

💡 고급 사용 예 1: 최소/최대 시간 제한

<input type="time" min="09:00" max="18:00" required />

💡 고급 사용 예 2: 시간 간격 설정

<!-- 15분 간격으로만 선택 가능 -->
<input type="time" step="900" /> <!-- 900초 = 15분 -->

📌 자바스크립트와 함께 활용

<input type="time" id="meetingTime" />
<script>
  document.getElementById("meetingTime").value = "14:30";
</script>

• JS에서 .value로 시간 설정 및 제어 가능

---

📆 2. <input type="month"> — 연/월 입력

✅ 기본 개념

• 연도와 월(YYYY-MM)만 선택 가능
• 일(day)은 선택 불가 → 월 단위 데이터(구독/요금제 등)에 적합

✅ 기본 사용 예

<input type="month" name="billingCycle" />

💡 고급 사용 예: 연간 보고서 필터링

<label for="reportMonth">보고 대상 월:</label>
<input type="month" id="reportMonth" min="2023-01" max="2025-12" />

📌 자바스크립트 활용 예시

<input type="month" id="salaryMonth" />
<script>
  const now = new Date();
  const formatted = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
  document.getElementById("salaryMonth").value = formatted;
</script>

---

📅 3. <input type="week"> — ISO 8601 주간 입력

✅ 기본 개념

• ISO 8601 형식의 주(YYYY-Www)를 선택
• 주 단위 업무 보고, 회의 스케줄 지정에 유용

✅ 기본 사용 예

<input type="week" name="weeklySchedule" />

💡 고급 사용 예: 주간 회의 관리 UI

<input type="week" min="2024-W01" max="2024-W52" step="1" />

📌 자바스크립트로 특정 주 자동 설정

<input type="week" id="weekPicker" />
<script>
  const today = new Date();
  const year = today.getFullYear();
  const weekNumber = getWeekNumber(today); // 커스텀 함수 필요
  document.getElementById("weekPicker").value = `${year}-W${weekNumber}`;

  function getWeekNumber(date) {
    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    const dayNum = d.getUTCDay() || 7;
    d.setUTCDate(d.getUTCDate() + 4 - dayNum);
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    return String(Math.ceil((((d - yearStart) / 86400000) + 1) / 7)).padStart(2, '0');
  }
</script>

---

📅 4. <input type="date"> — 연/월/일 선택

✅ 기본 개념

• 가장 널리 사용되는 날짜 입력 타입
• 브라우저에서 기본 제공하는 캘린더 UI 지원
• YYYY-MM-DD 형식

✅ 기본 사용 예

<label>생년월일:</label>
<input type="date" name="birth" />

💡 고급 사용 예 1: 날짜 범위 제한

<input type="date" min="2023-01-01" max="2025-12-31" />

💡 고급 사용 예 2: 오늘 날짜 자동 설정

<input type="date" id="today" />
<script>
  document.getElementById("today").valueAsDate = new Date();
</script>

---

📅 5. <input type="datetime-local"> — 날짜 + 시간

✅ 기본 개념

• 날짜와 시간을 동시에 입력받는 필드
• 시간대(Timezone) 정보는 포함되지 않음 → 로컬 시간 기반
• YYYY-MM-DDTHH:mm 형식 (T는 구분자)

✅ 기본 사용 예

<input type="datetime-local" name="appointment" />

💡 고급 사용 예: 회의 예약 시스템

<input type="datetime-local" id="bookingTime" min="2024-04-01T09:00" max="2024-04-01T18:00" step="1800" />
<!-- 30분 단위 선택 -->

📌 자바스크립트 연동 예

<input type="datetime-local" id="logDate" />
<script>
  const now = new Date();
  const local = now.toISOString().slice(0,16);
  document.getElementById("logDate").value = local;
</script>

---

🔍 브라우저 지원 현황 요약

타입	크롬	파이어폭스	사파리	IE
time	✅	✅	✅	❌
month	✅	✅	✅	❌
week	✅	✅	✅	❌
date	✅	✅	✅	❌
datetime-local	✅	✅	✅	❌

• 구형 브라우저(특히 IE)는 입력 타입 무시 → type="text"처럼 처리됨

---

✅ 결론

HTML의 시간/날짜 입력 타입은 기능이 단순해 보이지만 적절히 활용하면 매우 강력한 폼 인터페이스를 만들 수 있습니다. 또한 자바스크립트와 함께 사용하면 동적 기능 확장도 가능하며, UX와 데이터 정합성 모두 개선할 수 있습니다.

실무에서는 각 입력 타입의 표현 범위와 제약 조건을 잘 이해하고, 적절한 min/max/step 설정, 기본값 자동화, 로직 유효성 검사 등을 병행하는 것이 좋습니다.