用来输入出生日期的好用JavaScript
个人感觉非常好用的一个日期选择器
Code
1<script type="text/javascript">
2var $ = 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>
1<script type="text/javascript">
2var $ = 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>
body中的调用
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>
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>
啦啦啦 我是救火的小行家 哪里有问题请找我呀 我喜欢来解决它