日期下拉选择器，可自定义日期范围。
使用了一个技巧获取指定月份的天数。
运行效果：
代码下载：
test.htm (3794)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期下拉菜单</title>
<script type="text/javascript">
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
}
var DateSelector = Class.create();
DateSelector.prototype = {
initialize : function(idYear, idMonth, idDay, options) {
var oYear = $(idYear), oMonth = $(idMonth), oDay = $(idDay), dt = new Date(), i = 0;
this.oYear = oYear;
this.oMonth = oMonth;
this.oDay = oDay;
this.SetOptions(options);
var iYear = parseInt(this.options.Year), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day);
this.Year = iYear > 1900 ? iYear : dt.getFullYear();
this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth
: dt.getMonth() + 1;
this.Day = iDay > 0 ? iDay : dt.getDate();
this.MinYear = this.Year - (parseInt(this.options.MinYear) || 0);
this.MaxYear = this.Year + (parseInt(this.options.MaxYear) || 0);
this.SetYear();
this.SetMonth();
this.SetDay();
var oThis = this;
addEventHandler(oYear, "change", function() {
oThis.onYearChange()
});
addEventHandler(oMonth, "change", function() {
oThis.onMonthChange()
});
addEventHandler(oDay, "change", function() {
oThis.onDayChange()
});
},
//设置默认属性
SetOptions : function(options) {
this.options = {//默认值
Year :0,//年
Month :0,//月
Day :0,//日
MinYear :0,//最小年份与year相差的年数
MaxYear :5
//最大年份与year相差的年数
};
Object.extend(this.options, options || {});
},
//年改变事件
onYearChange : function() {
this.Year = this.oYear.value;
this.SetDay();
},
//月改变事件
onMonthChange : function() {
this.Month = this.oMonth.value;
this.SetDay();
},
//日改变事件
onDayChange : function() {
this.Day = this.oDay.value;
},
//年设置
SetYear : function() {
this.SetSelect(this.oYear, this.MinYear, this.MaxYear, this.Year
- this.MinYear);
},
//月设置
SetMonth : function() {
this.SetSelect(this.oMonth, 1, 12, this.Month - 1);
},
//日设置
SetDay : function() {
//这里技巧地取得月份天数
var daysInMonth = new Date(this.Year, this.Month, 0).getDate();
if (this.Day > daysInMonth) {
this.Day = daysInMonth;
}
;
this.SetSelect(this.oDay, 1, daysInMonth, this.Day - 1);
},
//select设置
SetSelect : function(oSelect, iMin, iMax, iIndex) {
oSelect.options.length = 0;
for ( var i = iMin; i <= iMax; i++) {
var op = document.createElement("OPTION");
op.value = i;
op.innerHTML = i;
oSelect.appendChild(op);
}
oSelect.selectedIndex = iIndex;
}
};
</script>
</head>
<body>
<select id="idYear"></select>
<select id="idMonth"></select>
<select id="idDay"></select>
<script>
new DateSelector("idYear", "idMonth", "idDay", {
minyear :10,
maxyear :10
});
</script>
</body>
</html>
test.htm 2008-07-26_065853.gif 
