HTML에서 날짜 선택기(date picker)는 웹사이트나 폼에서 사용자가 특정 날짜를 손쉽게 선택할 수 있도록 도와주는 유용한 입력 컨트롤입니다. 기본적으로 날짜 선택기는 어떤 날짜든 허용하지만, max 속성을 활용하면 선택 가능한 날짜 범위를 제한하여 오늘 날짜까지만 선택하도록 설정할 수 있습니다.
기본 문법
<input type="date" max="YYYY-MM-DD">
날짜 선택기란?
날짜 선택기는 사용자가 달력 인터페이스를 통해 날짜를 고를 수 있는 UI 컴포넌트입니다. 예약 시스템, 일정 관리 소프트웨어, 생년월일 입력 폼 등 다양한 웹 폼에서 널리 활용됩니다.
JavaScript로 최대 날짜를 오늘로 설정하기
max 속성을 동적으로 오늘 날짜로 지정하려면, JavaScript를 사용해 현재 날짜를 YYYY-MM-DD 형식으로 생성해야 합니다.
HTML 구조
type="date" 속성을 가진 input 요소를 먼저 작성합니다.
<input type="date" id="datepicker">
전체 예제 코드
다음은 JavaScript를 이용해 선택 가능한 최대 날짜를 오늘로 설정하는 완성된 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Date Picker with Max Date</title>
</head>
<body>
<h3>Select a Date (Max: Today)</h3>
<input type="date" id="datepicker">
<script>
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
document.getElementById('datepicker').setAttribute('max', formattedDate);
</script>
</body>
</html>
위 코드를 실행하면 오늘 날짜까지만 선택할 수 있는 날짜 선택기가 화면에 나타나며, 미래 날짜는 비활성화되어 선택할 수 없습니다.
JavaScript 동작 원리
위 JavaScript 코드는 다음과 같은 순서로 동작합니다.
- 현재 날짜를 나타내는 새로운 Date 객체를 생성합니다.
- 연도, 월, 일 값을 각각 추출합니다.
padStart()메서드를 사용해 월과 일 앞에 0을 채워 두 자리로 맞춥니다.- 날짜 입력 필드에서 요구하는 YYYY-MM-DD 형식으로 값을 조합합니다.
- 완성된 날짜 문자열을 날짜 선택기의 max 속성에 설정합니다.
활용 사례
최대 날짜를 오늘로 제한하는 기능은 다음과 같은 상황에서 특히 유용합니다.
- 당일 또는 과거 날짜만 선택할 수 있어야 하는 예약 시스템
- 생년월일이나 이벤트 신청 폼
- 미래 날짜가 필요 없는 데이터 수집 폼
- 과거 기록을 입력하는 관리 시스템
마무리
HTML 날짜 선택기의 max 날짜를 오늘로 설정하면 사용자가 미래 날짜를 선택하는 것을 효과적으로 차단할 수 있습니다. JavaScript로 오늘 날짜를 YYYY-MM-DD 형식으로 동적으로 생성한 뒤 input 요소의 max 속성에 적용하면, 실시간으로 날짜 선택 범위를 제한할 수 있습니다.
