HTML DOM의 input month min 속성은 HTML 문서에서 type="month"로 지정된 입력 필드의 min 속성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 가장 빠른(최소) 월을 프로그래밍 방식으로 제어할 수 있습니다.
구문(Syntax)
min 속성의 기본 사용 구문은 다음과 같습니다.
1. min 값 반환하기
object.min
2. min 값 수정하기
object.min = "YYYY-MM"
여기서 YYYY는 연도(4자리), MM은 월(2자리)을 의미합니다. 예를 들어 "2019-02"처럼 작성합니다.
예제(Example)
다음은 HTML DOM input month min 속성을 실제로 활용한 예제입니다. 사용자에게 4월부터 8월 사이의 휴가 희망 월을 선택하도록 안내하고, 선택 결과를 화면에 출력합니다.
<!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월 사이의 원하는 월을 선택합니다.
월을 선택한 후 '결과 보기' 버튼을 클릭하면 아래와 같이 선택한 월이 화면에 표시됩니다.
참고 사항
min 속성은 단독으로 사용할 수도 있지만, 일반적으로 max 속성과 함께 사용하여 선택 가능한 월의 범위를 지정합니다. 또한 JavaScript를 통해 런타임 중에 object.min = "2024-01" 형태로 값을 동적으로 변경하면, 이미 선택된 값이 새로운 범위를 벗어날 경우 폼 유효성 검사(form validation) 시 오류로 처리되므로 주의해야 합니다.