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>
效果截图
一些雕虫小技，还望大牛海涵，小弟在这献丑了，只想与大家分享。
