이제나 저제나 :: [javascript]날짜 자동생성되는 셀렉트 박스 만들기

[javascript]날짜 자동생성되는 셀렉트 박스 만들기

2008/09/24 19:25

첫번째 함수인 createDateSelectBox를 약간만 수정하면 현재년도에서 플러스 몇년 또는 마이너스 몇년의 단일 기능만 하는 함수로도 활용이 가능하다. (먼저 단일 기능을 먼저 만들었었는데..까먹었다..)

function createDateSelectBox(name, num) {
// 파라미터 설명 : name - 셀렌트 박스 이름, num - 현재년도에서 플러스, 마이너스 년도

var dt = new Date();
var c_id = document.getElementById(name + "_id");
var inHtml = "";
var currentYear = dt.getFullYear();
var currentMonth = dt.getMonth() + 1;
var currentDay = dt.getDate();
var dt2 = new Date(currentYear, currentMonth, "");
var intNum = parseInt(num);
var optMonth = "";
var optDay = "";
var lastDay = dt2.getDate();
//var selected = "";

inHtml += " <select name='" + name + "_year' id='" + name + "_year' onchange='onchageDate(\"" + name + "\")'> ";
inHtml += " <option value='' >선택</option>";
for (var i = currentYear - intNum; i <= currentYear + intNum; i++) {
inHtml += "<option value='" + i + "' >" + i + "</opton>";
}
inHtml += " </select> ";

inHtml += " <select name='" + name + "_month' id='" + name + "_month' onchange='onchageDate(\"" + name + "\")'> ";
inHtml += " <option value='' >선택</option>";
for (var i = 1; i <= 12; i++) {
if (i >= 1 && i < 10) {
optMonth = "0" + i;
} else {
optMonth = i;
}

inHtml += " <option value='" + optMonth + "' >" + optMonth + "</option>";
}
inHtml += " </select> ";

inHtml += " <select name='" + name + "_day' id='" + name + "_day'> ";
inHtml += " <option value='' >선택</option>";
for (var i = 1; i <= lastDay; i++) {
if (i >= 1 && i < 10) {
optDay = "0" + i;
} else {
optDay = i;
}

inHtml += " <option value='" + optDay + "' >" + optDay + "</option>";
}
inHtml += " </select> ";

c_id.innerHTML = inHtml;
}

function onchageDate(name) {
var optDay = "";
// year, month, day SelectBox찾기
selectYear = document.getElementById(name+"_year");
selectMonth = document.getElementById(name+"_month");
selectDay = document.getElementById(name+"_day");

// 현재 년도와 월 구하기
year = selectYear.options[selectYear.selectedIndex].value;
month = selectMonth.options[selectMonth.selectedIndex].value;

tmpDate = new Date(year, month, 0);

selectedIndex = selectDay.selectedIndex;

for(i = selectDay.length-1; i >= 0; i--) {
selectDay.options[i] = null;
}

selectDay.options[0] = new Option('선택', '');

for(i = 1; i <= tmpDate.getDate(); i++) {
if (i >= 1 && i < 10) {
optDay = "0" + i;
} else {
optDay = i;
}
selectDay.options[i] = new Option(optDay, optDay);
}

if(selectedIndex <= tmpDate.getDate()) {
selectDay.options[selectedIndex].selected = true;
} else {
selectDay.options[tmpDate.getDate()-1].selected = true;
}
}