HTML DOM의 Input Datetime max 속성은 datetime 타입 입력 필드의 max 속성값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 최대 날짜와 시간을 JavaScript로 동적으로 제어할 수 있어, 만료일 설정이나 예약 시스템 등에서 유용하게 활용됩니다.
문법(Syntax)
max 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기
inputDatetimeObject.max
2. 값 설정하기
inputDatetimeObject.max = YYYY-MM-DDThh:mm:ssTZD
문자열 값 구성 요소
“YYYY-MM-DDThh:mm:ssTZD” 형식에서 각 구성 요소는 다음과 같은 의미를 가집니다.
| 구성 요소 | 설명 |
|---|---|
| YYYY | 연도를 나타냅니다 (예: 1998) |
| MM | 월을 나타냅니다 (예: 05는 5월) |
| DD | 일을 나타냅니다 (예: 24) |
| T | 날짜와 시간을 구분하는 구분자입니다 |
| hh | 시간을 나타냅니다 (예: 12) |
| mm | 분을 나타냅니다 (예: 48) |
| ss | 초를 나타냅니다 (예: 00) |
| TZD | 표준 시간대 지정자(Time Zone Designator)입니다. 예를 들어 IST는 인도 표준시를, Z는 UTC(협정 세계시)를 의미합니다 |
예제
다음은 Input Datetime max 속성을 활용한 예제 코드입니다. 버튼을 클릭하면 보험 만료일(max 값)이 새로운 날짜로 갱신되는 동작을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Max</title>
</head>
<body>
<form>
Date & Time: <input type="datetime" id="dateTime" name="DateSelect" value="2019-12-31T23:49:59Z" max="2019-12-31T23:59:59Z">
</form>
<button onclick="getMaxDate()">Renew Insurance</button>
<div id="divDisplay"></div>
<script>
var inputDate = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Insurance Datetime: '+inputDate.max;
function getMaxDate() {
var oldInputDate = inputDate.max;
inputDate.max = '2029-12-31T23:49:59Z';
divDisplay.textContent = 'New Insurance Datetime: '+inputDate.max;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Renew Insurance'(보험 갱신) 버튼을 클릭하기 전 −
버튼을 클릭한 후 −
버튼 클릭 전에는 현재 설정된 max 값인 2019-12-31T23:59:59Z가 화면에 표시되고, 버튼을 클릭하면 max 속성이 2029-12-31T23:49:59Z로 변경되어 갱신된 만료일이 출력되는 것을 확인할 수 있습니다.