HTML DOM의 Input DatetimeLocal stepDown() 메서드는 datetime-local 입력 필드의 값을 지정한 분(minute) 단위만큼 감소시키는 역할을 합니다. 예를 들어 사용자가 버튼을 클릭했을 때 현재 선택된 날짜·시간에서 일정한 간격으로 시간을 줄여야 하는 경우에 유용하게 활용됩니다.
문법(Syntax)
stepDown() 메서드의 기본 문법은 다음과 같습니다.
inputDatetimeLocalObject.stepDown(number)
매개변수 number에는 감소시킬 분 단위의 숫자를 전달합니다. 이 값은 선택 사항이며, 별도로 지정하지 않으면 기본값 1이 적용되어 1분씩 감소합니다.
예제
이제 Input DatetimeLocal stepDown() 메서드를 실제로 활용한 예제를 살펴보겠습니다. 아래 코드는 두 개의 버튼을 통해 각각 10분씩, 25분씩 시간을 감소시키는 동작을 구현한 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal stepDown()</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-stepDown( )</legend>
<label for="datetimeLocalSelect">Local Date Time :
<input type="datetime-local" id="datetimeLocalSelect" value="2010-12-21T23:50">
</label>
<input type="button" onclick="changeStep(10)" value="Decrease by 10">
<input type="button" onclick="changeStep(25)" value="Decrease by 25">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function changeStep(myStepDown) {
inputDatetimeLocal.stepDown(myStepDown);
divDisplay.textContent = 'Current Step: '+myStepDown;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
버튼을 클릭하기 전 — 초기값으로 설정된 '2010-12-21T23:50'이 표시됩니다.
'Decrease by 10' 버튼 클릭 후 — 현재 시간에서 10분이 감소하여 '23:40'으로 변경됩니다.
'Decrease by 25' 버튼 클릭 후 — 현재 시간에서 25분이 감소하여 '23:15'로 변경됩니다.
정리
stepDown() 메서드는 datetime-local 필드의 값을 프로그래밍 방식으로 손쉽게 조절할 수 있는 편리한 도구입니다. 반대로 값을 증가시켜야 할 때는 stepUp() 메서드를 사용하면 되며, 두 메서드를 함께 활용하면 시간 선택 UI를 더욱 직관적으로 구성할 수 있습니다.