HTML 날짜 입력란에서 미래 날짜 선택 차단하기

문제 상황과 해결 방법

웹 페이지에서 날짜를 입력받는 데 HTML의 input 태그를 사용할 때가 많습니다. 이런 상황에서 사용자가 미래의 날짜를 선택할 수 없도록 제한을 두는 것이 필요할 수 있습니다. 이 문제에 대한 해결책은 max 속성을 사용하는 것입니다.

max 속성은 HTML input 태그에서 사용할 수 있는 속성으로, 날짜나 숫자 등의 최대 허용 값(최댓값)을 지정합니다. 여기서 최댓값이란 사용자가 선택할 수 있는 가장 큰 수치를 의미합니다. 즉, 미래의 날짜를 선택하지 못하게 하는 제한을 둘 수 있습니다.

코드 예시

HTML과 JavaScript를 활용한 간단한 예시를 보겠습니다.

<input type="date" id="myDate" max="">

document.addEventListener("DOMContentLoaded", function(){
  var today = new Date().toISOString().split('T')[0];
  document.getElementById("myDate").setAttribute('max', today);
});

코드 설명:

1. input 태그에 type="date"를 지정하여 날짜 입력란을 만듭니다.
2. max 속성을 빈 문자열로 초기화합니다. 이는 나중에 JavaScript를 통해 값이 설정될 예정입니다.
3. 문서가 완전히 로딩된 후에 실행되는 JavaScript 코드 내에서, 오늘 날짜를 ISO 문자열 형태로 가져옵니다. toISOString와 split('T')[0]을 통해 날짜 부분만 추출합니다.
4. 이 날짜를 max 속성에 할당함으로써, 오늘 날짜 이후를 선택할 수 없게 만듭니다.

이렇게 하면 사용자는 미래의 날짜를 선택할 수 없으므로 문제가 해결됩니다.

주의 사항

max 속성을 사용할 때 유의해야 할 점은, 이 속성은 브라우저에 의존적이라는 것입니다. 즉, 모든 브라우저에서 동일하게 작동하지 않을 수 있으므로 테스트가 필요합니다. 또한, 사용자가 브라우저 개발자 도구를 통해 max 값을 변경할 가능성도 있으니, 서버 측에서도 유효성 검사를 해주는 것이 좋습니다.