<!
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 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 = document.getElementById(idYear), oMonth = document.getElementById(idMonth), oDay = document.getElementById(idDay), dt = new Date(), i = 0;
this.oYear = oYear; this.oMonth = oMonth; this.oDay = oDay;
this.date = dt;
this.SetOptions(options);
var iYear = parseInt(this.options.year), iMonth = parseInt(this.options.month), iDay = parseInt(this.options.day);
this.iYear = iYear > 1900 ? iYear : dt.getFullYear() ;
this.iMonth = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth();
this.iDay = iDay > 0 ? iDay : dt.getDate();
i = parseInt(this.options.minyear) || 0; this.minYear = i > 0 ? iYear - i : iYear;
i = parseInt(this.options.maxyear) || 0; this.maxYear = i > 0 ? iYear + i : iYear;
this.SetYear(); this.SetMonth(); this.SetDay();
var oDateSelector = this;
oYear.onchange = function()...{ oDateSelector.onYearChange() };
oMonth.onchange = function()...{ oDateSelector.onMonthChange() };
oDay.onchange = function()...{ oDateSelector.onDayChange() };
},
//设置默认属性
SetOptions: function(options) ...{
var dt = this.date;
this.options = ...{//默认值
year: dt.getFullYear(),//年
month: dt.getMonth() + 1,//月
day: dt.getDate(),//日
minyear: 0,//最小年份与year相差的年数
maxyear: 5//最大年份与year相差的年数
};
Object.extend(this.options, options || ...{});
},
//年改变事件
onYearChange: function() ...{
this.iYear = this.oYear.value; this.SetDay();
},
//月改变事件
onMonthChange: function() ...{
this.iMonth = this.oMonth.value; this.SetDay();
},
//日改变事件
onDayChange: function() ...{
this.iDay = this.oDay.value;
},
//年设置
SetYear: function() ...{
var minYear = this.minYear;
this.SetSelector(this.oYear, minYear, this.maxYear, this.iYear - minYear);
},
//月设置
SetMonth: function() ...{
this.SetSelector(this.oMonth, 1, 12, this.iMonth - 1);
},
//日设置
SetDay: function() ...{
//精髓所在
var iDay = this.iDay, dt = new Date(this.iYear, this.iMonth, 0), daysInMonth = dt.getDate();
if (iDay > daysInMonth) ...{ this.iDay = iDay = daysInMonth; };
this.SetSelector(this.oDay, 1, daysInMonth, iDay - 1);
},
//列表设置
SetSelector: function(oSel, iMin, iMax, iIndex) ...{
oSel.options.length = 0;
for (var i = iMin; i <= iMax; i++) ...{
var op = document.createElement("OPTION");
op.value = i; op.innerHTML = i;
oSel.appendChild(op);
}
oSel.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 >
< 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 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 = document.getElementById(idYear), oMonth = document.getElementById(idMonth), oDay = document.getElementById(idDay), dt = new Date(), i = 0;
this.oYear = oYear; this.oMonth = oMonth; this.oDay = oDay;
this.date = dt;
this.SetOptions(options);
var iYear = parseInt(this.options.year), iMonth = parseInt(this.options.month), iDay = parseInt(this.options.day);
this.iYear = iYear > 1900 ? iYear : dt.getFullYear() ;
this.iMonth = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth();
this.iDay = iDay > 0 ? iDay : dt.getDate();
i = parseInt(this.options.minyear) || 0; this.minYear = i > 0 ? iYear - i : iYear;
i = parseInt(this.options.maxyear) || 0; this.maxYear = i > 0 ? iYear + i : iYear;
this.SetYear(); this.SetMonth(); this.SetDay();
var oDateSelector = this;
oYear.onchange = function()...{ oDateSelector.onYearChange() };
oMonth.onchange = function()...{ oDateSelector.onMonthChange() };
oDay.onchange = function()...{ oDateSelector.onDayChange() };
},
//设置默认属性
SetOptions: function(options) ...{
var dt = this.date;
this.options = ...{//默认值
year: dt.getFullYear(),//年
month: dt.getMonth() + 1,//月
day: dt.getDate(),//日
minyear: 0,//最小年份与year相差的年数
maxyear: 5//最大年份与year相差的年数
};
Object.extend(this.options, options || ...{});
},
//年改变事件
onYearChange: function() ...{
this.iYear = this.oYear.value; this.SetDay();
},
//月改变事件
onMonthChange: function() ...{
this.iMonth = this.oMonth.value; this.SetDay();
},
//日改变事件
onDayChange: function() ...{
this.iDay = this.oDay.value;
},
//年设置
SetYear: function() ...{
var minYear = this.minYear;
this.SetSelector(this.oYear, minYear, this.maxYear, this.iYear - minYear);
},
//月设置
SetMonth: function() ...{
this.SetSelector(this.oMonth, 1, 12, this.iMonth - 1);
},
//日设置
SetDay: function() ...{
//精髓所在
var iDay = this.iDay, dt = new Date(this.iYear, this.iMonth, 0), daysInMonth = dt.getDate();
if (iDay > daysInMonth) ...{ this.iDay = iDay = daysInMonth; };
this.SetSelector(this.oDay, 1, daysInMonth, iDay - 1);
},
//列表设置
SetSelector: function(oSel, iMin, iMax, iIndex) ...{
oSel.options.length = 0;
for (var i = iMin; i <= iMax; i++) ...{
var op = document.createElement("OPTION");
op.value = i; op.innerHTML = i;
oSel.appendChild(op);
}
oSel.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 >