【转】JS 上拉列表式时间空间-JavaSript-爱易网页

【转】JS 上拉列表式时间空间

日期：2014-05-16　浏览次数：20348 次

【转】JS 下拉列表式时间空间

<!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);
}
}
}

var Extend = function(destination, source) {
for (var property in source) {
   destination[property] = source[property];
}
return destination;
}

var DateSelector = Class.create();
DateSelector.prototype = {
initialize: function(oYear, oMonth, oDay, options) {
this.SelYear = $(oYear);//年选择对象
this.SelMonth = $(oMonth);//月选择对象
this.SelDay = $(oDay);//日选择对象

this.SetOptions(options);

var dt = new Date(), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day), iMinYear = parseInt(this.options.MinYear), iMaxYear = parseInt(this.options.MaxYear);

this.Year = parseInt(this.options.Year) || dt.getFullYear();
this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
this.Day = iDay > 0 ? iDay : dt.getDate();
this.MinYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;
this.MaxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year;
this.onChange = this.options.onChange;

//年设置
this.SetSelect(this.SelYear, this.MinYear, this.MaxYear - this.MinYear + 1, this.Year - this.MinYear);
//月设置
this.SetSelect(this.SelMonth, 1, 12, this.Month - 1);
//日设置
this.SetDay();

var oThis = this;
//日期改变事件
addEventHandler(this.SelYear, "change", function(){
   oThis.Year = oThis.SelYear.value; oThis.SetDay(); oThis.onChange();
});
addEventHandler(this.SelMonth, "change", function(){
   oThis.Month = oThis.SelMonth.value; oThis.SetDay(); oThis.onChange();
});
addEventHandler(this.SelDay, "change", function(){ oThis.Day = oThis.SelDay.value; oThis.onChange(); });
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
   Year:   0,//年
   Month:   0,//月
   Day:   0,//日
   MinYear: 0,//最小年份
   MaxYear: 0,//最大年份
   onChange: function(){}//日期改变时执行
};
Extend(this.options, options || {});
},
//日设置
SetDay: function() {
//取得月份天数
var daysInMonth = new Date(this.Year, this.Month, 0).getDate();
if (this.Day > daysInMonth) { this.Day = daysInMonth; };
this.SetSelect(this.SelDay, 1, daysInMonth, this.Day - 1);
},
//select设置
SetSelect: function(oSelect, iStart, iLength, iIndex) {
//添加option
oSelect.options.length = iLength;
for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }
//设置选中项
oSelect.selectedIndex = iIndex;
}
};
</script>
</head>

<body>
<select id="idYear"></select> 
<select id="idMonth"></select> 
<select id="idDay"></select> 
<br />
你选择的日期：<span id="idShow"></span>
<script>
var ds = new DateSelector("idYear", "idMonth", "idDay", {
MaxYear: new Date().getFullYear() + 2,
onChange: function(){ $("idShow").innerHTML = this.Year + "/" + this.Month + "/" + this.Day; }
});

ds.onChange();
</script>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

【转】JS 上拉列表式时间空间

相关资料更多>

推荐阅读更多>