日期联动

华天下

浏览: 228417 次
性别:
来自: 北京

最近访客更多访客>>

a1002323289

yuanyuan7891

dong717

qqggcc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web应用安全

F#prototype XHTML

<!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,oHour,oMinute,oSecond, options) {
this.SelYear = $(oYear);//年选择对象
this.SelMonth = $(oMonth);//月选择对象
this.SelDay = $(oDay);//日选择对象
this.SelHour = $(oHour);
this.SelMinute = $(oMinute);
this.SelSecond = $(oSecond);
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.Hour = dt.getHours();
this.Minute = dt.getMinutes();
this.Second = dt.getSeconds();
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();
this.SetSelect(this.SelHour, 1, 24, this.Hour - 1);
this.SetSelect(this.SelMinute, 1, 60, this.Minute - 1);
this.SetSelect(this.SelSecond, 0, 60, this.Second - 1);

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;
var tmp = iStart + i
oSelect.options[i].value = tmp ;
if(tmp < 10){oSelect.options[i].text = '0'+ tmp; }
else{oSelect.options[i].text = tmp; }
}
//设置选中项
oSelect.selectedIndex = iIndex;
},
GetDateN:function(){
var y = parseInt(this.SelYear.options[this.SelYear.selectedIndex].text);
var m = parseInt(this.SelMonth.options[this.SelMonth.selectedIndex].text);
var d = parseInt(this.SelDay.options[this.SelDay.selectedIndex].text);
var h = parseInt(this.SelHour.options[this.SelHour.selectedIndex].text);
var mm = parseInt(this.SelMinute.options[this.SelMinute.selectedIndex].text);
var ss = parseInt(this.SelSecond.options[this.SelSecond.selectedIndex].text);
alert(m);
var tempdate = new Date(y,m,d,h,mm,ss);
return tempdate;
}
};
</script>
</head>

<body>

From:<select id="f_idMonth"></select>
<select id="f_idDay"></select>
<select id="f_idYear"></select>
<select id="f_idHour"></select>
<select id="f_idMinute"></select>
<select id="f_idSecond"></select>
<br>
To:<select id="t_idMonth"></select>
<select id="t_idDay"></select>
<select id="t_idYear"></select>
<select id="t_idHour"></select>
<select id="t_idMinute"></select>
<select id="t_idSecond"></select>
<br />
你选择的日期：<span id="idShow"></span>
<script>
var ds = new DateSelector("f_idMonth", "f_idDay", "f_idYear","f_idHour", "f_idMinute", "f_idSecond", {
MaxYear: new Date().getFullYear(),
MinYear: new Date().getFullYear()-10,
onChange: function(){ $("idShow").innerHTML = this.Year + "/" + this.Month + "/" + this.Day; }
});
var da = new DateSelector("t_idMonth", "t_idDay", "t_idYear","t_idHour", "t_idMinute", "t_idSecond", {
MaxYear: new Date().getFullYear(),
MinYear: new Date().getFullYear()-10,
onChange: function(){ $("idShow").innerHTML = this.Year + "/" + this.Month + "/" + this.Day; }
});
ds.onChange();

function tst(){
alert('from : ' + ds.GetDateN() + 'to :' + da.GetDateN() );
}
</script>
<button onclick='tst()'>Tst</button>
</body>
</html>

分享到：