最近由于工作的项目比较紧，自己也持续的加班，这段时间就很少有时间写写自己的技术随笔和大家一起分享。废话少说，“翠花，上酸菜！”。
大家对日期控件都比较熟悉吧。网上提供了很多的很漂亮功能有很强大的日期控件，尤其是jQuery的日期控件，连jQuery官方都提供了一款日期控件datepicker。
而大家见到的日历控件大都都是这种形式的：
还有这种形式的：
这两种形式基本可以满足我们对时间控件的需求，但是大家是否遇到在项目的个人中心编辑生日时采用时间控件，如果是上面的两种形式，虽然可以满足大家的功能需求，但是，在我们的多次使用和用户的反馈过程中，这样操作很不方便，用户友好性很差。比如，我要选择1990-7-1这个日期作为我的生日，用户需要不断的点击才能选中。查看了很多类似网站的做法，他们也大都不采用上面的日期控件形式，而是采用下拉列表的日期控件形式。如QQ的个人生日的下拉列表日期控件：
个人还是蛮欣赏QQ产品的用户体验度。
在网上搜了很多下拉列表日期控件的相关资料，很多都不是很靠谱，倒是有一篇文章貌似是我们想要的结果http://www.evget.com/zh-CN/Info/catalog/7810.html。
演示了文章提供的demo，坑爹啊！2月竟然有31日，大失所望。仔细看了里面的源码，里面还是有很多可取之处，于是决定在这源码的基础之上来改善。
唉，说了这么多，大家终于知道我这篇文章要干啥啦。不好意思，让大家久等啦。“翠花，上主菜，准备开席！”。
javascript 源码
View Code
1 /**
2 * jQuery.jSelectDate Version 0.1
3 * jQuery 下拉列表选择日期插件
4 *
5 *Author: R-King
6 *
7 *
8 */
9
10 /*
11 * ***************** Example ***********************
12
13 <head>
14 <title>SelectDate 测试</title>
15 </head>
16 <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
17 <script src="/Scripts/jquery.SelectDate.js" type="text/javascript"></script>
18 <script type="text/javascript">
19 $("body").ready(function () {
20 $("#tDate").jSelectDate({
21 yearBeign: 1960,
22 disabled: false
23 });
24 })
25 </script>
26 <body>
27 <input id="tDate" type="text" value="1990-7-15"/>
28 </body>
29
30 * **************** End Example **********************
31 */
32 var jSelectDate = {
33
34 yearClass: "jselectDate_year",
35
36 /**
37 * 开始年
38 */
39 yearBegin: 1960,
40
41 /**
42 * 终止年
43 */
44 yearEnd: 2005,
45 //maxDay:,
46
47 days: 31,
48 /**
49
50 * 初始化对向
51 * @param {Object} el 用于存放日期结果的文本框 jQuery DOM
52 */
53 init: function (els, isDisabled) {
54
55 els.each(function () {
56
57 var maxDay = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
58
59 var el = $(this);
60
61 //取得旧的日期
62 var elValue = el.val();
63 elDate = new Date(elValue.split("-").join("/"));
64
65 var nYear = elDate.getFullYear();
66 var nMonth = jSelectDate.returnMonth(elDate.getMonth());
67 var nDay = elDate.getDate();
68
69
70 //隐藏给出的对向
71 el.hide();
72
73 //先算出当前共有多少个jSelectDate
74 var currentIdx = $(jSelectDate.yearClass).length + 1;
75
76 /**
77 * 创建年select
78 */
79 var selYear = document.createElement("select");
80 selYear.id = "selYear" + currentIdx
81 selYear.className = jSelectDate.yearClass;
82 selYear.disabled = isDisabled;
83
84 //加入选项
85 for (var i = jSelectDate.yearEnd; i >= jSelectDate.yearBegin; i--) {
86
87 var option = document.createElement("option");
88 option.value = i;
89 option.innerHTML = i;
90
91 //判断是否有旧的值，如果有就选中
92 if (!isNaN(nYear)) {
93 if (i == nYear) {
94 option.selected = true;
95 }
96 }
97
98 selYear.appendChild(option);
99 option = null;
100
101 }
102
103 //加入控件到文本框的位置
104 el.after(selYear);
105
106 /**
107 * 创建月
108 */
109 var selMonth = document.createElement("select");
110 selMonth.id = "selMonth" + currentIdx
111 selMonth.disabled = isDisabled;
112 //加入选项
113 for (var i = 1; i <= 12; i++) {
114 var option = document.createElement("option");
115 option.value = i;
116 option.innerHTML = i;
117
118 //判断是否有旧的值，如果有就选中
119 if (!isNaN(nMonth)) {
120 if (i == nMonth) {
121 option.selected = true;
122 }
123 }
124
125 selMonth.appendChild(option);
126 option = null;
127 }
128
129 $(selYear).after(selMonth);
130 $(selMonth).before(" ");
131
132 /**
133 * 创建日
134 */
135 var selDay = document.createElement("select");
136 selDay.id = "selDay" + currentIdx
137 selDay.disabled = isDisabled;
138 //加入选项
139 for (var i = 1; i <= jSelectDate.days; i++) {
140
141 var option = document.createElement("option");
142 option.value = i;
143 option.innerHTML = i;
144
145 //判断是否有旧的值，如果有就选中
146 if (!isNaN(nDay)) {
147 if (i == nDay) {
148 option.selected = true;
149 }
150 }
151
152 selDay.appendChild(option);
153 option = null;
154 }
155
156 $(selMonth).after(selDay);
157 $(selDay).before(" ");
158
159 var getDate = function () {
160 var year = $(selYear).val();
161 var month = $(selMonth).val();
162 var day = $(selDay).val();
163 el.val(year + "-" + month + "-" + day);
164 }
165
166 var createDay = function () {
167 //先移除，然后重新创建
168 $("#selDay" + currentIdx).remove();
169 var selDay = document.createElement("select");
170 selDay.id = "selDay" + currentIdx
171 selDay.disabled = isDisabled;
172 for (var i = 1; i <= jSelectDate.days; i++) {
173 var option = document.createElement("option");
174 option.value = i;
175 option.innerHTML = i;
176 //判断是否有旧的值，如果有就选中
177 if (!isNaN(nDay)) {
178 if (i == nDay) {
179 option.selected = true;
180 }
181 }
182 selDay.appendChild(option);
183 option = null;
184 }
185 $(selMonth).after(selDay);
186 $(selDay).before(" ");
187 }
188 /**
189 * 给几个下拉列表加入更改后的事件
190 */
191 $(selDay).change(function () {
192 return getDate();
193 });
194 $(selMonth).change(function () {
195
196 var month = $(selMonth).val();
197 var year = $(selYear).val();
198
199 //判断该月份的最大值与上次选择的最大值不相同，就重新创建日
200 if (jSelectDate.days != maxDay[month - 1]) {
201 jSelectDate.days = maxDay[month - 1];
202 if ((0 == year % 4 && (year % 100 != 0 || year % 400 == 0)) && month == 2) {
203 jSelectDate.days++;
204 }
205 createDay();
206 }
207 return getDate();
208 });
209 $(selYear).change(function () {
210 var month = $(selMonth).val();
211 var year = $(selYear).val();
212 if (jSelectDate.days != maxDay[month - 1]) {
213 jSelectDate.days = maxDay[month - 1];
214 if ((0 == year % 4 && (year % 100 != 0 || year % 400 == 0)) && month == 2) {
215 jSelectDate.days++;
216 }
217 createDay();
218 }
219 return getDate();
220 });
221
222 })
223
224
225 },
226
227 returnMonth: function (num) {
228 var arr = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
229 return arr[num];
230 }
231
232 }
233
234 jQuery.fn.jSelectDate = function(s){
235
236 var getNowYear = function(){
237 //得到现在的年
238 var date = new Date();
239 return date.getFullYear();
240 }
241
242 defaults = {
243 css: "",
244 disabled: false,
245 yearBegin: 1960,
246 yearEnd: getNowYear()
247 }
248
249
250 $.extend(defaults, s);
251
252 jSelectDate.yearBegin = defaults.yearBeign;
253 jSelectDate.yearEnd = defaults.yearEnd;
254 jSelectDate.init($(this), defaults.disabled);
255
256 return $(this);
257
258 }
示例代码
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>SelectDate 测试</title>
5 </head>
6 <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
7 <script src="/Scripts/jquery.SelectDate.js" type="text/javascript"></script>
8 <script type="text/javascript">
9 $("body").ready(function () {
10 $("#tDate").jSelectDate({
11 yearBeign: 1960,
12 disabled: false
13 });
14 })
15 </script>
16 <body>
17 <input id="tDate" type="text" value="1990-7-15"/>
18 </body>
19 </html>
效果截图
