[JS/jQuery] onChange 이벤트 발생시 Input 태그의 값 변경하는 방법

웹사이트를 개발하면서 아래와 같은 상황을 겪어 그 해결 방법을 기록으로 남겨봅니다.

상황

사용자가 날짜를 선택할 수 있는 type="date" 속성을 가진 input 태그가 있는데, 이 input 태그의 날짜를 변경하면 그 옆에 있는 두 개의 또 다른 input 태그에 그 날짜의 년도와 월을 표시해야 하는 것입니다.

이 태그들을 간단하게 HTML 코드로 표현하면 아래와 같습니다.

<input id="yyyymmdd" type="date">
<input id="yyyy" type="number">
<input id="mm" type="number">

이런 상황에서 자바스크립트 또는 jQuery 를 이용해 yyyymmdd 의 날짜를 변경 했을 때 yyyy 와 mm 의 값을 바꿔주는 코드를 작성해보려고 합니다.

솔루션

전문 개발자가 아니기에 여러 번 시행착오를 거치긴 했지만, 결과적으로 아래 코드를 이용하면 간단하게 해결할 수 있었습니다.

(편의를 위해 아래 코드는 jQuery 를 이용하였습니다.)

<input id="yyyymmdd" type="date" onChange="setYM(this.value);">
<input id="yyyy" type="number">
<input id="mm" type="number">

<script type="text/javascript">
    function setYM(yyyymmdd) {
        var dt = new Date(yyyymmdd);
        jQuery('input#yyyy').val(dt.getFullYear());
        jQuery('input#mm').val(dt.getMonth()+1);
    }
</script>

위 코드가 작동하는 과정은 아래와 같습니다.

1. input 태그의 값이 변할 때(onChange), 만들어 둔 setYM 함수를 실행하면서 Input 태그의 날짜 값(this.value)을 넘겨줌
2. setYM 함수는 투입 변수로 받은 날짜를 Date 함수를 이용해 날짜 형식으로 변경하고 dt 라는 변수에 담아줌
3. dt 에서 년도를 추출해(getFullYear) yyyy 라는 id 를 가진 input 태그의 값으로 투입(.val)
4. dt 에서 월을 추출해(getMonth) mm 이라는 id 를 가진 input 태그의 값으로 투입(.val)

자바스크립트의 특성인 대소문자 구분 등만 유의하면 간단하게 문제를 해결 할 수 있습니다.

다만 여기서 주의할 점이 하나 있는데, getMonth 함수의 경우 반환하는 값이 0~11 입니다. 예를 들어서 0 은 1월, 1은 2월, … , 11은 12월을 나타냅니다. 그래서 jQuery('input#mm').val(dt.getMonth()+1); 이 부분에 +1 을 해주는 것입니다.

끝.