HTML DOM Input Date step 속성 – 날짜 선택 간격 설정 방법

HTML DOM의 Input Date step 속성은 사용자가 날짜 입력 필드의 달력을 열었을 때 선택할 수 있는 유효한 날짜 간격(일 단위)을 결정합니다. 이 속성을 활용하면 <input type="date"> 요소의 step 속성 값을 가져오거나 새로 설정할 수 있습니다.

예를 들어 step 값을 2로 지정하면 달력에서 하루 걸러 날짜만 선택 가능하도록 제한할 수 있어, 특정 주기의 날짜만 입력받아야 하는 폼을 만들 때 유용합니다.

구문

step 속성의 기본 구문은 다음과 같습니다.

1. 현재 값 반환하기

inputDateObject.step

2. 특정 값으로 설정하기

inputDateObject.step = number

여기서 number는 일 단위의 간격을 의미하는 숫자입니다. 기본값은 1이며, 이 경우 모든 날짜를 자유롭게 선택할 수 있습니다.

예제

다음은 Input Date step 속성을 실제로 활용한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Date step 속성 예제</title>
</head>
<body>
<form>
<div>
홀수 날짜 달력: <input type="date" id="dateSelect" step="2">
</div>
</form>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDate = document.getElementById("dateSelect");
   divDisplay.textContent = '현재 step 값: '+inputDate.step;
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 아래와 같은 화면이 출력됩니다. 이 예제에서는 step 값이 2로 설정되어 있어, 달력에서 하루 걸러 날짜만 선택할 수 있습니다.

HTML DOM Input Date step 속성 – 날짜 선택 간격 설정 방법

참고 사항

step 속성은 JavaScript뿐 아니라 HTML 마크업에서 직접 step="숫자" 형태로 지정할 수도 있습니다.
설정된 step 값에 따라 사용자가 직접 입력한 날짜가 간격에 맞지 않을 경우, 폼 유효성 검사 시 오류로 처리될 수 있습니다.
주요 최신 브라우저(Chrome, Edge, Firefox, Opera 등)에서 잘 지원되지만, Safari 등 일부 브라우저에서는 날짜 입력 UI 동작이 다를 수 있으므로 크로스 브라우저 테스트를 권장합니다.