HTML DOM Input DatetimeLocal min 속성 – 문법과 예제로 배우는 최소 날짜·시간 설정

HTML DOM의 Input DatetimeLocal min 속성은 <input type="datetime-local"> 요소의 min 속성 값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택할 수 있는 날짜와 시간의 하한선을 지정할 수 있어, 폼 유효성 검사와 입력 범위 제어에 매우 유용합니다.

문법(Syntax)

min 속성의 기본 문법은 다음과 같습니다.

1. 값 반환하기

inputDatetimeLocalObject.min

2. 값 설정하기

inputDatetimeLocalObject.min = YYYY-MM-DDThh:mm:ss

문자열 값 구성 요소

"YYYY-MM-DDThh:mm:ss" 형식을 이루는 각 구성 요소의 의미는 아래 표와 같습니다.

구성 요소	설명
YYYY	연도를 나타냅니다. (예: 2019)
MM	월을 나타냅니다. (예: 07 → 7월)
DD	일을 나타냅니다. (예: 11)
T	날짜와 시간을 구분하는 구분자입니다.
hh	시간(時)을 나타냅니다. (예: 08)
mm	분을 나타냅니다. (예: 18)
ss	초를 나타냅니다. (예: 23)

예제

다음 예제를 통해 Input DatetimeLocal min 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal 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>Datetime-Local-min</legend>
<label for="datetimeLocalSelect">Today :
<input type="datetime-local" id="datetimeLocalSelect" value="2019-05-23T12:45" min="2000-03-1T10:23">
</label>
<input type="button" onclick="getMinimum()" value="What's the minimum input? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function getMinimum() {
        divDisplay.textContent = 'Minimum Legal Input: '+inputDatetimeLocal.min;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

'What's the minimum input?' 버튼을 클릭하기 전 –

HTML DOM Input DatetimeLocal min 속성 – 문법과 예제로 배우는 최소 날짜·시간 설정

'What's the minimum input?' 버튼을 클릭한 후 –

HTML DOM Input DatetimeLocal min 속성 – 문법과 예제로 배우는 최소 날짜·시간 설정

버튼을 클릭하면 자바스크립트의 getMinimum() 함수가 실행되어, 해당 datetime-local 입력 필드에 설정된 min 속성 값(즉, 허용되는 최소 날짜 및 시간)이 화면에 표시됩니다.