HTML DOM Input Date min 속성 – 날짜 입력 최솟값 가져오기 및 설정하기

HTML DOM의 Input Date min 속성은 <input type="date"> 요소의 min 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 날짜 선택기에서 선택할 수 있는 가장 빠른 날짜(하한선)를 지정할 수 있어, 폼 유효성 검사 및 잘못된 날짜 데이터 입력 방지에 매우 유용합니다.

문법(Syntax)

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

값 반환하기

inputDateObject.min

값 설정하기

inputDateObject.min = YYYY-MM-DD

문자열 값(String Values)

"YYYY-MM-DD" 형식에서 각 구성 요소의 의미는 다음과 같습니다.

문자열 값	설명
YYYY	연도를 나타냅니다 (예: 1998)
MM	월을 나타냅니다 (예: 05는 5월)
DD	일을 나타냅니다 (예: 24)

예제

다음은 Input Date min 속성의 실제 동작을 보여주는 예제입니다. 초기 min 값은 2000-01-01로 설정되어 있으며, 버튼을 클릭하면 1998-07-01로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Date Min</title>
</head>
<body>
<form>
날짜 선택: <input type="date" id="date" name="DateSelect" min="2000-01-01">
</form>
<button onclick="getMinDate()">최소 날짜 변경</button>
<div id="divDisplay"></div>
<script>
   var inputDate = document.getElementById("date");
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = '날짜 입력의 최솟값: ' + inputDate.min;
   function getMinDate() {
      inputDate.min = '1998-07-01';
      divDisplay.textContent = '날짜 입력의 최솟값: ' + inputDate.min;
   }
</script>
</body>
</html>

실행 결과

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

'최소 날짜 변경' 버튼을 클릭하기 전 −

HTML DOM Input Date min 속성 – 날짜 입력 최솟값 가져오기 및 설정하기

버튼을 클릭한 후 −

HTML DOM Input Date min 속성 – 날짜 입력 최솟값 가져오기 및 설정하기

참고 사항

min 속성은 max 속성과 함께 사용하면 허용 가능한 날짜 범위를 지정할 수 있습니다. 또한 min/max 범위를 벗어난 날짜를 입력하면 브라우저의 기본 폼 유효성 검사(rangeUnderflow)에 의해 제출이 차단되므로, 별도의 JavaScript 검증 없이도 안정적인 날짜 입력 처리가 가능합니다.