HTML DOM Input Date stepUp() 메서드 – 날짜 필드 값을 일 단위로 증가시키는 방법

HTML DOM의 Input Date stepUp() 메서드는 날짜 입력 필드(<input type="date">)의 현재 값을 지정한 일수만큼 앞으로 이동시키는 기능을 제공합니다. 사용자가 선택한 날짜에서 며칠 뒤의 날짜로 손쉽게 변경할 수 있어, 예약 시스템이나 일정 관리 UI를 구현할 때 특히 유용하게 활용됩니다.

문법

stepUp() 메서드의 기본 문법은 다음과 같습니다.

inputDateObject.stepUp(number)

number 매개변수에는 날짜를 증가시킬 일수를 숫자로 전달합니다. 이 값은 선택 사항이며, 인자를 생략하면 기본값인 1일씩 증가합니다.

예제

다음은 Input Date stepUp() 메서드를 활용한 실제 예제입니다. 초기값이 2019-06-06으로 설정된 날짜 입력 필드에 두 개의 버튼을 배치하고, 각 버튼을 클릭하면 날짜가 2일 또는 3일씩 증가하도록 구현했습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Date stepUp()</title>
</head>
<body>
<form>
<div>
Calendar: <input type="date" id="dateSelect" value="2019-06-06">
</div>
</form>
<button onclick="changeStep(2)">Increase by 2</button>
<button onclick="changeStep(3)">Increase by 3</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDate = document.getElementById("dateSelect");
   function changeStep(num){
      if(num===2)
         inputDate.stepUp(2);
      else
         inputDate.stepUp(3);
      divDisplay.textContent = 'Current date increased by: '+num;
   }
</script>
</body>
</html>

코드 설명

changeStep(num) 함수는 버튼 클릭 시 전달받은 숫자에 따라 분기 처리합니다.
num이 2이면 stepUp(2), 그렇지 않으면 stepUp(3)을 호출해 날짜를 해당 일수만큼 증가시킵니다.
마지막으로 divDisplay 영역에 몇 일이 증가했는지 텍스트로 표시합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.

‘Increase by 2’(2일 증가) 버튼 클릭 시 −

HTML DOM Input Date stepUp() 메서드 – 날짜 필드 값을 일 단위로 증가시키는 방법

‘Increase by 3’(3일 증가) 버튼 클릭 시 −

HTML DOM Input Date stepUp() 메서드 – 날짜 필드 값을 일 단위로 증가시키는 방법

stepUp() 메서드는 대부분의 최신 브라우저에서 지원되며, 반대로 날짜를 감소시키고 싶을 때는 stepDown() 메서드를 사용하면 됩니다.