HTML DOM의 Input Datetime min 속성은 입력 날짜/시간(datetime) 필드에 지정된 min(최솟값) 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 가장 이른 날짜와 시간을 프로그래밍 방식으로 제어할 수 있습니다.
문법(Syntax)
min 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기
inputDatetimeObject.min
현재 설정된 min 속성의 값을 문자열 형태로 반환합니다.
2. 값 설정하기
inputDatetimeObject.min = YYYY-MM-DDThh:mm:ssTZD
지정한 문자열 값으로 min 속성을 새롭게 설정합니다.
문자열 값 구성 요소
min 속성에 사용되는 “YYYY-MM-DDThh:mm:ssTZD” 형식은 각 부분이 다음과 같은 의미를 가집니다.
| 구성 요소 | 설명 |
|---|---|
| YYYY | 연도를 나타냅니다. (예: 1998) |
| MM | 월을 나타냅니다. (예: 5월은 05) |
| DD | 일을 나타냅니다. (예: 24) |
| T | 날짜와 시간을 구분하는 구분 기호입니다. |
| hh | 시간을 나타냅니다. (예: 12) |
| mm | 분을 나타냅니다. (예: 48) |
| ss | 초를 나타냅니다. (예: 00) |
| TZD | 시간대 표시자(Time Zone Designator)입니다. (예: Z는 UTC를 의미) |
예제 코드
다음은 Input Datetime min 속성의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Min</title>
</head>
<body>
<form>
Date & Time: <input type="datetime" id="dateTime" name="DateSelect" value="2009-6-24T20:49Z" min="2008-12-31T23:59:59Z">
</form>
<button onclick="minDateDecrease()">Decrease min age bar</button>
<div id="divDisplay"></div>
<script>
var inputDatetime = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Minimum Age Bar: '+inputDatetime.min;
function minDateDecrease() {
inputDatetime.min = '2010-12-31T23:59:59Z';
divDisplay.textContent = 'Minimum Age Bar: '+inputDatetime.min;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
‘Decrease min age bar’ 버튼을 클릭하기 전 화면 −
‘Decrease min age bar’ 버튼을 클릭한 후 화면 −
버튼을 클릭하면 자바스크립트 함수가 실행되어 min 속성 값이 새로운 날짜로 변경되고, 변경된 최솟값이 화면에 즉시 표시되는 것을 확인할 수 있습니다. 이처럼 min 속성은 런타임 중에도 동적으로 수정이 가능합니다.