用来输入出生日期的好用JavaScript
个人感觉非常好用的一个日期选择器
Code
1<script type="text/javascript">
2
var $ = function (id) {
3
return "string" == typeof id ? document.getElementById(id) : id;
4
};
5
6function addEventHandler(oTarget, sEventType, fnHandler) {
7 if (oTarget.addEventListener) {
8 oTarget.addEventListener(sEventType, fnHandler, false);
9 } else if (oTarget.attachEvent) {
10 oTarget.attachEvent("on" + sEventType, fnHandler);
11 } else {
12 oTarget["on" + sEventType] = fnHandler;
13 }
14};
15
16var Class = {
17 create: function() {
18 return function() {
19 this.initialize.apply(this, arguments);
20 }
21 }
22}
23
24var Extend = function(destination, source) {
25 for (var property in source) {
26 destination[property] = source[property];
27 }
28 return destination;
29}
30
31var DateSelector = Class.create();
32DateSelector.prototype = {
33 initialize: function(oYear, oMonth, oDay, options) {
34 this.SelYear = $(oYear);//年选择对象
35 this.SelMonth = $(oMonth);//月选择对象
36 this.SelDay = $(oDay);//日选择对象
37
38 this.SetOptions(options);
39
40 var dt = new Date(), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day), iMinYear = parseInt(this.options.MinYear), iMaxYear = parseInt(this.options.MaxYear);
41
42 this.Year = parseInt(this.options.Year) || dt.getFullYear();
43 this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
44 this.Day = iDay > 0 ? iDay : dt.getDate();
45 this.MinYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;
46 this.MaxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year;
47 this.onChange = this.options.onChange;
48
49 //年设置
50 this.SetSelect(this.SelYear, this.MinYear, this.MaxYear - this.MinYear + 1, this.Year - this.MinYear);
51 //月设置
52 this.SetSelect(this.SelMonth, 1, 12, this.Month - 1);
53 //日设置
54 this.SetDay();
55
56 var oThis = this;
57 //日期改变事件
58 addEventHandler(this.SelYear, "change", function(){
59 oThis.Year = oThis.SelYear.value; oThis.SetDay(); oThis.onChange();
60 });
61 addEventHandler(this.SelMonth, "change", function(){
62 oThis.Month = oThis.SelMonth.value; oThis.SetDay(); oThis.onChange();
63 });
64 addEventHandler(this.SelDay, "change", function(){ oThis.Day = oThis.SelDay.value; oThis.onChange(); });
65 },
66 //设置默认属性
67 SetOptions: function(options) {
68 this.options = {//默认值
69 Year: 0,//年
70 Month: 0,//月
71 Day: 0,//日
72 MinYear: 0,//最小年份
73 MaxYear: 0,//最大年份
74 onChange: function(){}//日期改变时执行
75 };
76 Extend(this.options, options || {});
77 },
78 //日设置
79 SetDay: function() {
80 //取得月份天数
81 var daysInMonth = new Date(this.Year, this.Month, 0).getDate();
82 if (this.Day > daysInMonth) { this.Day = daysInMonth; };
83 this.SetSelect(this.SelDay, 1, daysInMonth, this.Day - 1);
84 },
85 //select设置
86 SetSelect: function(oSelect, iStart, iLength, iIndex) {
87 //添加option
88 oSelect.options.length = iLength;
89 for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }
90 //设置选中项
91 oSelect.selectedIndex = iIndex;
92 }
93
};
94
</script>
Code
1<body>
2<select id="idYear"></select>
3<select id="idMonth"></select>
4<select id="idDay"></select>
5<br />
6你选择的日期：<span id="idShow"></span>
7<script>
8var ds = new DateSelector("idYear", "idMonth", "idDay", {
9 MaxYear: new Date().getFullYear() + 2,
10 onChange: function(){ $("idShow").innerHTML = this.Year + "/" + this.Month + "/" + this.Day; }
11});
12
13ds.onChange();
14</script>
15</body>
Code1
<script type="text/javascript">2
var $ = function (id) {3
return "string" == typeof id ? document.getElementById(id) : id;4
};5
6
function addEventHandler(oTarget, sEventType, fnHandler) {7
if (oTarget.addEventListener) {8
oTarget.addEventListener(sEventType, fnHandler, false);9
} else if (oTarget.attachEvent) {10
oTarget.attachEvent("on" + sEventType, fnHandler);11
} else {12
oTarget["on" + sEventType] = fnHandler;13
}14
};15
16
var Class = {17
create: function() {18
return function() {19
this.initialize.apply(this, arguments);20
}21
}22
}23
24
var Extend = function(destination, source) {25
for (var property in source) {26
destination[property] = source[property];27
}28
return destination;29
}30
31
var DateSelector = Class.create();32
DateSelector.prototype = {33
initialize: function(oYear, oMonth, oDay, options) {34
this.SelYear = $(oYear);//年选择对象35
this.SelMonth = $(oMonth);//月选择对象36
this.SelDay = $(oDay);//日选择对象37
38
this.SetOptions(options);39
40
var dt = new Date(), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day), iMinYear = parseInt(this.options.MinYear), iMaxYear = parseInt(this.options.MaxYear);41
42
this.Year = parseInt(this.options.Year) || dt.getFullYear();43
this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;44
this.Day = iDay > 0 ? iDay : dt.getDate();45
this.MinYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;46
this.MaxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year;47
this.onChange = this.options.onChange;48
49
//年设置50
this.SetSelect(this.SelYear, this.MinYear, this.MaxYear - this.MinYear + 1, this.Year - this.MinYear);51
//月设置52
this.SetSelect(this.SelMonth, 1, 12, this.Month - 1);53
//日设置54
this.SetDay();55
56
var oThis = this;57
//日期改变事件58
addEventHandler(this.SelYear, "change", function(){59
oThis.Year = oThis.SelYear.value; oThis.SetDay(); oThis.onChange();60
});61
addEventHandler(this.SelMonth, "change", function(){62
oThis.Month = oThis.SelMonth.value; oThis.SetDay(); oThis.onChange();63
});64
addEventHandler(this.SelDay, "change", function(){ oThis.Day = oThis.SelDay.value; oThis.onChange(); });65
},66
//设置默认属性67
SetOptions: function(options) {68
this.options = {//默认值69
Year: 0,//年70
Month: 0,//月71
Day: 0,//日72
MinYear: 0,//最小年份73
MaxYear: 0,//最大年份74
onChange: function(){}//日期改变时执行75
};76
Extend(this.options, options || {});77
},78
//日设置79
SetDay: function() {80
//取得月份天数81
var daysInMonth = new Date(this.Year, this.Month, 0).getDate();82
if (this.Day > daysInMonth) { this.Day = daysInMonth; };83
this.SetSelect(this.SelDay, 1, daysInMonth, this.Day - 1);84
},85
//select设置86
SetSelect: function(oSelect, iStart, iLength, iIndex) {87
//添加option88
oSelect.options.length = iLength;89
for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }90
//设置选中项91
oSelect.selectedIndex = iIndex;92
}93
};94
</script>
body中的调用
Code1
<body>2
<select id="idYear"></select> 3
<select id="idMonth"></select> 4
<select id="idDay"></select> 5
<br />6
你选择的日期：<span id="idShow"></span>7
<script>8
var ds = new DateSelector("idYear", "idMonth", "idDay", {9
MaxYear: new Date().getFullYear() + 2,10
onChange: function(){ $("idShow").innerHTML = this.Year + "/" + this.Month + "/" + this.Day; }11
});12
13
ds.onChange();14
</script>15
</body>
啦啦啦 我是救火的小行家 哪里有问题请找我呀 我喜欢来解决它
浙公网安备 33010602011771号