HTML DOM의 Input Date stepDown() 메서드는 날짜 입력 필드(<input type="date">)의 현재 날짜 값을 지정한 일수만큼 감소시키는 역할을 합니다. 예를 들어, 특정 버튼을 클릭했을 때 달력의 날짜를 며칠씩 뒤로 이동시키고 싶다면 이 메서드를 활용하면 됩니다.
문법(Syntax)
stepDown() 메서드의 기본 문법은 다음과 같습니다.
inputDateObject.stepDown(number)
매개변수 number에는 감소시킬 일수를 숫자로 전달합니다. 인자를 생략하면 기본값인 1이 적용되어 하루씩 감소합니다.
예제(Example)
아래 예제는 Input Date stepDown() 메서드를 실제로 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date stepDown()</title>
</head>
<body>
<form>
<div>
Calendar: <input type="date" id="dateSelect" value ="2019-07-07">
</div>
</form>
<button onclick="changeStep(2)">2일 감소</button>
<button onclick="changeStep(3)">3일 감소</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
function changeStep(num){
if(num===2)
inputDate.stepDown(2);
else
inputDate.stepDown(3);
divDisplay.textContent = '현재 날짜가 감소된 일수: '+num;
}
</script>
</body>
</html>코드 설명
- 날짜 입력 필드의 초기값은 2019-07-07로 설정되어 있습니다.
- '2일 감소' 버튼을 클릭하면
stepDown(2)가 호출되어 날짜가 이틀 줄어듭니다. - '3일 감소' 버튼을 클릭하면
stepDown(3)가 호출되어 날짜가 사흘 줄어듭니다. - 버튼 클릭 후 결과 화면에는 몇 일이 감소되었는지 표시됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'2일 감소' 버튼 클릭 시 −
'3일 감소' 버튼 클릭 시 −
참고 사항
- stepDown() 메서드는 min 속성으로 설정된 최솟값보다 날짜가 내려가지 않도록 제한합니다.
- 반대로 날짜를 증가시키려면 stepUp() 메서드를 사용하면 됩니다.
- 해당 메서드는 대부분의 최신 브라우저에서 지원되지만, 구형 브라우저에서는 동작하지 않을 수 있으므로 호환성 확인이 필요합니다.