HTML DOM에서 Input DatetimeLocal 요소의 max 속성은 해당 입력 필드에 설정된 max 속성값을 반환하거나 새로 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 날짜 및 시간의 상한값을 JavaScript로 동적으로 제어할 수 있습니다.
문법(Syntax)
max 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기
inputDatetimeLocalObject.max
2. 값 설정하기
inputDatetimeLocalObject.max = YYYY-MM-DDThh:mm:ss
문자열 값 구성 요소
max 속성에 지정되는 "YYYY-MM-DDThh:mm:ss" 형식은 각 부분이 다음과 같은 의미를 가집니다.
| 문자열 값 | 설명 |
|---|---|
| YYYY | 연도를 나타냅니다. (예: 2006) |
| MM | 월을 나타냅니다. (예: 6월은 06) |
| DD | 일을 나타냅니다. (예: 17) |
| T | 날짜와 시간을 구분하는 구분자입니다. |
| hh | 시간을 나타냅니다. (예: 02) |
| mm | 분을 나타냅니다. (예: 21) |
| ss | 초를 나타냅니다. (예: 40) |
예제 코드
다음 예제는 Input DatetimeLocal max 속성을 실제로 활용하는 방법을 보여줍니다. 보험 만료일을 나타내는 datetime-local 입력 필드가 있고, 버튼을 클릭하면 max 값을 갱신하여 보험을 연장하는 시나리오입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal 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>Datetime-Local-max</legend>
<label for="datetimeLocalSelect">보험 만료일:
<input type="datetime-local" id="datetimeLocalSelect" value="2019-07-01T23:59:59" max="2019-08-01T23:59:59" disabled>
</label>
<input type="button" onclick="renewInsurance()" value="보험 갱신">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function renewInsurance() {
inputDatetimeLocal.max = '2029-07-01T23:59:59';
inputDatetimeLocal.value = inputDatetimeLocal.max;
divDisplay.textContent = '갱신된 보험 만료일: '+inputDatetimeLocal.value;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'보험 갱신' 버튼을 클릭하기 전 화면은 아래와 같습니다.
'보험 갱신' 버튼을 클릭한 후, max 속성값이 2029년으로 변경되고 입력 필드의 값도 함께 갱신되는 것을 확인할 수 있습니다.
정리
Input DatetimeLocal의 max 속성은 날짜·시간 입력 필드의 선택 가능한 최대 범위를 제어하는 강력한 도구입니다. 폼 유효성 검사나 만료일 관리 등 사용자 입력을 특정 기간으로 제한해야 하는 상황에서 유용하게 활용할 수 있습니다.