jQuery 的下拉列表日期控件

转载于 2012-08-11 12:42:00 发布 · 280 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/tzh521241/archive/2012/08/11/selectDate.html

本文介绍了一个基于jQuery的下拉列表日期选择插件，旨在解决传统日期控件在选择具体日期时的不便，特别是在选择生日等场景下。插件通过创建年、月、日的下拉列表，提高了用户在选择日期时的体验。

最近由于工作的项目比较紧，自己也持续的加班，这段时间就很少有时间写写自己的技术随笔和大家一起分享。废话少说，“翠花，上酸菜！”。

大家对日期控件都比较熟悉吧。网上提供了很多的很漂亮功能有很强大的日期控件，尤其是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  * http://www.cnblogs.com/tzh521241/
  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>

效果截图

一些雕虫小技，还望大牛海涵，小弟在这献丑了，只想与大家分享。

转载于:https://www.cnblogs.com/tzh521241/archive/2012/08/11/selectDate.html

标签

#javascript #xhtml #ViewUI