HTML DOM의 input month max 속성은 HTML 문서에서 type="month"로 지정된 입력 필드의 max 속성 값을 가져오거나 수정하는 기능을 제공합니다. 이 속성을 활용하면 사용자가 선택할 수 있는 월(月)의 상한선을 JavaScript로 동적으로 제어할 수 있습니다.
문법(Syntax)
max 속성의 기본 문법은 다음과 같습니다.
1. max 값 가져오기
object.max
2. max 값 설정하기
object.max = "YYYY-MM"
여기서 YYYY는 연도, MM은 월을 의미합니다. 예를 들어 "2019-02"처럼 작성하면 2019년 2월이 됩니다.
예제(Example)
HTML DOM input month max 속성의 실제 활용 예제를 살펴보겠습니다. 아래 코드는 4월부터 8월 사이의 월만 선택할 수 있도록 min과 max 속성을 함께 설정한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input month max/min 속성 데모</h1>
<p>안녕하세요! 휴가가 필요하신가요?</p>
<p>필요하다면 4월부터 8월 사이에서 원하는 달을 선택해 주세요:</p>
<input type="month" class="monthInput" min="2019-04" max="2019-08">
<button onclick="showMySelection()" class="btn">결과 보기</button>
<div class="show"></div>
<script>
function showMySelection() {
var monthInput = document.querySelector(".monthInput");
var showMsg = document.querySelector(".show");
if(monthInput.value === ''){
showMsg.innerHTML="월을 선택해 주세요!!";
} else {
showMsg.innerHTML=monthInput.value;
}
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
월 입력 필드에서 4월부터 8월 사이의 원하는 달을 선택한 뒤, “결과 보기” 버튼을 클릭하면 선택한 월이 화면에 표시됩니다.
버튼을 클릭했을 때의 결과는 아래와 같습니다.
정리
input month 요소의 max 속성은 날짜 범위 유효성 검사에 매우 유용합니다. min 속성과 함께 사용하면 사용자가 특정 기간 내에서만 월을 선택하도록 강제할 수 있어, 폼 검증 로직을 간결하게 구현할 수 있습니다. 또한 JavaScript를 통해 이 값을 동적으로 변경하면 상황에 따라 유연하게 선택 범위를 조정할 수 있다는 점도 기억해 두세요.