HTML5 input type="date"의 브라우저 호환성 문제 해결

문제 상황

예약 시스템의 날짜 선택 기능을 <input type="date">로 구현했는데, Chrome에서는 잘 동작하지만 Safari와 IE11에서는 단순 텍스트 입력창으로 표시되는 문제가 발생했다.

브라우저 지원 현황

2017년 3월 기준으로 date input 지원 현황은 다음과 같다.

• Chrome 20+: 완벽 지원
• Firefox 57+: 미지원 (올해 말 지원 예정)
• Safari: 미지원
• IE: 미지원
• Edge: 부분 지원

해결 방법

1. Feature Detection

먼저 브라우저가 date input을 지원하는지 체크했다.

function isDateInputSupported() {
  var input = document.createElement('input');
  input.setAttribute('type', 'date');
  return input.type === 'date';
}

2. Polyfill 적용

지원하지 않는 브라우저에는 Pikaday 라이브러리를 사용해 대체했다.

<input type="date" id="reservation-date" class="date-input">

<script>
if (!isDateInputSupported()) {
  var picker = new Pikaday({
    field: document.getElementById('reservation-date'),
    format: 'YYYY-MM-DD',
    yearRange: [2017, 2020]
  });
}
</script>

3. 서버 사이드 검증

클라이언트에서 포맷이 달라질 수 있으므로 서버에서도 반드시 날짜 형식을 검증하도록 수정했다.

// Express.js
app.post('/reservation', (req, res) => {
  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
  if (!datePattern.test(req.body.date)) {
    return res.status(400).json({ error: 'Invalid date format' });
  }
  // ...
});

결론

HTML5의 새로운 input type들은 편리하지만 아직 브라우저 지원이 완벽하지 않다. 프로덕션에서는 항상 폴백을 준비해야 한다. 당분간은 date picker 라이브러리를 직접 사용하는 것이 더 안전할 것 같다.