jQuery 的下拉列表日期控件

本文轉載自查看原文 2012-08-11 12:42 6071 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>

效果截圖

一些雕蟲小技，還望大牛海涵，小弟在這獻丑了，只想與大家分享。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於jquery下拉列表樹插件代碼 jQuery實例——jQuery實現聯動下拉列表查詢框 Jquery 多選下拉列表插件jquery multiselect [原創]FineUI秘密花園（八） — 下拉列表控件 QT 創建一個具有復選功能的下拉列表控件 MFC （Combo-box control）下拉列表控件的使用 Selectize – 用於標簽和下拉列表功能的選擇控件銀行下拉列表使用jquery的ajax方法獲取下拉列表值 jQuery EasyUI -ComboBox（下拉列表框）