HTML DOM의 Input Week max 속성은 <input type="week"> 요소에 적용된 max 속성값을 가져오거나 새로 설정할 때 사용합니다. 이 속성을 활용하면 사용자가 선택할 수 있는 주(week)의 최대 범위를 동적으로 제어할 수 있습니다.
문법(Syntax)
1. max 값 가져오기
inputWeekObject.max
2. max 값 설정하기
inputWeekObject.max = "YYYY-Www"
문자열 값(String Values) 형식
max 속성에 지정되는 "YYYY-Www" 형식은 다음과 같이 구성됩니다.
| 구성 요소 | 설명 |
|---|---|
| YYYY | 연도를 나타냅니다. (예: 2017) |
| -W | 연도와 주를 구분하는 구분 기호입니다. |
| ww | 해당 연도의 주(week) 번호를 나타냅니다. (예: 52) |
예를 들어 "2020-W15"는 2020년의 15번째 주를 의미합니다.
실전 예제
아래 예제에서는 보험 만료 주차를 표시하고, 버튼 클릭 시 max 속성값을 갱신하여 보험 갱신 날짜를 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Week max</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Week-max</legend>
<label for="WeekSelect">진행 중인 주:
<input type="week" id="WeekSelect" value="2020-W01" max="2019-W52" disabled>
</label>
<input type="button" onclick="renewInsurance()" value="보험 갱신">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
divDisplay.textContent = '보험 만료일: '+inputWeek.max.split("-W")[1]+'주차';
divDisplay.textContent += ', '+inputWeek.max.split("-W")[0]+'년';
function renewInsurance() {
inputWeek.max = '2029-W52';
divDisplay.textContent = '보험 갱신 기한: '+inputWeek.max.split("-W")[1]+'주차';
divDisplay.textContent += ', '+inputWeek.max.split("-W")[0]+'년';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'보험 갱신' 버튼 클릭 전
초기 상태에서는 max 속성에 설정된 2019-W52 값을 기준으로 보험 만료 주차가 화면에 표시됩니다.
'보험 갱신' 버튼 클릭 후
버튼을 클릭하면 renewInsurance() 함수가 실행되어 max 속성값이 2029-W52로 변경되고, 갱신된 만료 주차가 화면에 다시 표시됩니다.
정리
Input Week의 max 속성은 자바스크립트를 통해 읽고 쓸 수 있으며, split("-W") 메서드를 활용하면 연도와 주차 정보를 손쉽게 분리해 활용할 수 있습니다. 폼 유효성 검사나 날짜 범위 제한이 필요한 UI를 구현할 때 유용하게 사용할 수 있습니다.