연도/월별 select option 생성

input 태그의 type을 date로 설정하면 '연도-월-일'을 선택할 수 있다. 이때 연도만 선택하거나 월만 선택하고 싶은 경우, select option을 javascript로 생성하여 구현할 수 있다.

연도 생성

먼저 연도만 선택하는 코드에 대해 설명한다. id가 year인 select 태그를 생성한다. 이때 option은 작성하지 않는다.

<select id="year"></select>

function initSelectYear(startYear) {
     var currentYear = new Date().getFullYear();
     var yearSelect = document.getElementById('year'); 

     for (var i = currentYear; i >= startYear; i--) {
         var option = document.createElement('option');
         option.value = i;
         option.text = i + '년';
         yearSelect.appendChild(option);
     }
}

startYear를 매개변수로 받는다. 2020를 받으면 2020년부터 ~ 현재년도까지 옵션이 생성된다.

Date 객체를 사용해 현재 시스템 날짜를 가져와 getFullYear() 함수로 연도만 가져온다.

HTML 문서에서 id가 year인 select 요소를 찾아 yearSelect 변수에 저장한다.

currentYear부터 startYear까지 1년씩 감소하면서 반복해 option를 select 요소에 추가한다.

위 코드를 실행시키면 최신 연도부터 출력이 되는데, 오래된 순으로 정렬하려면 아래 코드를 실행하면 된다.

function initSelectYear(startYear) {
     var currentYear = new Date().getFullYear();
     var yearSelect = document.getElementById('year'); 

     for (var i = startYear; i <= currentYear; i++) {
         var option = document.createElement('option');
         option.value = i;
         option.text = i + '년';
         yearSelect.appendChild(option);
     }
}

월 생성

연도 생성 코드와 구조가 비슷하다.

<select id="month"></select>

function initSelectMonth() {
     var monthSelect = document.getElementById('month');
            
     for (var i = 1; i <= 12; i++) {
         var option = document.createElement('option');
         option.value = i;
         option.text = i + '월';
         monthSelect.appendChild(option);
     }
}

이 함수에서는 1월 ~ 12월만 출력하면 되므로 매개변수를 받지 않는다. 1부터 12까지 1씩 증가하면서 반복해 option를 select 요소에 추가하면 된다.