HTML DOM의 Input Date max 속성은 날짜(type="date") 유형의 입력 필드에 설정된 max 속성 값을 반환하거나 새로 지정할 때 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 최대 날짜를 동적으로 제어할 수 있습니다.
문법(Syntax)
max 속성의 기본 문법은 다음과 같습니다.
- 값 반환하기
inputDateObject.max
- max 값 설정하기 (문자열 형식)
inputDateObject.max = YYYY-MM-DD
문자열 값(String Values)
여기서 "YYYY-MM-DD"는 아래 표와 같이 구성됩니다.
| 문자열 값 | 설명 |
|---|---|
| YYYY | 연도를 나타냅니다 (예: 1998) |
| MM | 월을 나타냅니다 (예: 5월은 05) |
| DD | 일을 나타냅니다 (예: 24) |
예제(Example)
다음은 Input Date max 속성의 동작을 보여주는 예제입니다. 버튼을 클릭하면 날짜 입력 필드의 최대 날짜가 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Max</title>
</head>
<body>
<form>
날짜 선택: <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="getMaxDate()">최대 날짜 변경</button>
<div id="divDisplay"></div>
<script>
var inputDate = document.getElementById("date");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = '날짜 입력 필드의 최대 날짜: '+inputDate.max;
function getMaxDate() {
var oldInputDate = inputDate.max;
inputDate.max = '2020-12-31';
divDisplay.textContent = '날짜 입력 필드의 최대 날짜: '+inputDate.max;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'최대 날짜 변경' 버튼 클릭 전 −
'최대 날짜 변경' 버튼 클릭 후 −
버튼을 클릭하기 전에는 초기에 설정된 2018-12-31이 최대 날짜로 표시되며, 버튼을 클릭한 후에는 JavaScript를 통해 2020-12-31로 동적으로 변경된 것을 확인할 수 있습니다. 이처럼 max 속성을 활용하면 상황에 따라 날짜 선택 범위를 유연하게 조정할 수 있습니다.