HTML DOM의 Input Week min 속성은 <input type="week"> 요소의 min 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 가장 빠른 주(week)를 제한하여, 폼 유효성 검사와 날짜 범위 제어를 손쉽게 구현할 수 있습니다.
구문(Syntax)
Input Week min 속성의 기본 문법은 다음과 같습니다.
1. 값 가져오기
inputWeekObject.min
현재 설정된 min 속성의 값을 문자열로 반환합니다.
2. 값 설정하기
inputWeekObject.min = YYYY-Www
min 속성에 새로운 문자열 값을 할당하여 최소 허용 주를 변경합니다.
문자열 값(String Values) 형식
“YYYY-Www” 형식은 아래 요소들로 구성됩니다.
| 문자열 값 | 설명 |
|---|---|
| YYYY | 연도를 나타냅니다. (예: 1990) |
| W | 연도와 주를 구분하는 구분자(separator)입니다. |
| ww | 주(week)를 두 자리 숫자로 나타냅니다. (예: 07) |
예를 들어 2020-W05는 “2020년 5번째 주”를 의미하며, 이 값을 min으로 설정하면 그 이전 주는 선택할 수 없습니다.
실습 예제
다음은 Input Week min 속성을 활용한 예제 코드입니다. 버튼을 클릭하면 휴가 가능한 최소 주 정보를 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Week min</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-min</legend>
<label for="WeekSelect">Vacation Week:
<input type="week" id="WeekSelect" value="2019-W45" min="2020-W05">
</label>
<input type="button" onclick="getMinimum()" value="Go on a vacation">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function getMinimum() {
divDisplay.textContent = 'You can go on a vacation after: Week: '+inputWeek.min.split("-W")[1]+' ,'+inputWeek.min.split("-W")[0]
}
</script>
</body>
</html>
코드 설명
- 입력 필드의 초기값(value)은
2019-W45, 최소 허용 주(min)는2020-W05로 설정되어 있습니다. - ‘Go on a vacation’ 버튼을 클릭하면
getMinimum()함수가 실행됩니다. split("-W")메서드를 사용해 min 값에서 연도와 주 번호를 분리한 뒤 결과 영역에 출력합니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
‘Go on a vacation’ 버튼 클릭 전 −
‘Go on a vacation’ 버튼 클릭 후 −
버튼을 클릭하면 “You can go on a vacation after: Week: 05, 2020”처럼 min 속성에 설정된 최소 허용 주가 화면에 표시되는 것을 확인할 수 있습니다.