jQuery 的下拉列表日期控件
<div id="cnblogs_post_body">最近由于工作的项目比较紧，自己也持续的加班，这段时间就很少有时间写写自己的技术随笔和大家一起分享。废话少说，&ldquo;翠花，上酸菜！&rdquo;。大家对日期控件都比较熟悉吧。网上提供了很多的很漂亮功能有很强大的日期控件，尤其是jQuery的日期控件，连jQuery官方都提供了一款日期控件datepicker。
而大家见到的日历控件大都都是这种形式的：
http://pic002.cnblogs.com/images/2012/163940/2012081101075285.png
还有这种形式的：
http://pic002.cnblogs.com/images/2012/163940/2012081101110486.png
这两种形式基本可以满足我们对时间控件的需求，但是大家是否遇到在项目的个人中心编辑生日时采用时间控件，如果是上面的两种形式，虽然可以满足大家的功能需求，但是，在我们的多次使用和用户的反馈过程中，这样操作很不方便，用户友好性很差。比如，我要选择1990-7-1这个日期作为我的生日，用户需要不断的点击才能选中。查看了很多类似网站的做法，他们也大都不采用上面的日期控件形式，而是采用下拉列表的日期控件形式。如QQ的个人生日的下拉列表日期控件：
http://pic002.cnblogs.com/images/2012/163940/2012081101234976.png
个人还是蛮欣赏QQ产品的用户体验度。
在网上搜了很多下拉列表日期控件的相关资料，很多都不是很靠谱，倒是有一篇文章貌似是我们想要的结果http://www.evget.com/zh-CN/Info/catalog/7810.html。
演示了文章提供的demo，坑爹啊！2月竟然有31日，大失所望。仔细看了里面的源码，里面还是有很多可取之处，于是决定在这源码的基础之上来改善。
唉，说了这么多，大家终于知道我这篇文章要干啥啦。不好意思，让大家久等啦。&ldquo;翠花，上主菜，准备开席！&rdquo;。
javascript 源码
<div class="cnblogs_code" style="margin-left: 30px;" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_8cc34c78-4022-4009-9a06-308fa711d540" class="cnblogs_code_hide" style="margin-left: 30px;">1 /**2 * jQuery.jSelectDate Version 0.13 * jQuery 下拉列表选择日期插件4 *5 *Author: R-King6 * 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" + currentIdx111 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" + currentIdx137 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" + currentIdx171 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 != maxDay1]) {201 jSelectDate.days = maxDay1];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 != maxDay1]) {213 jSelectDate.days = maxDay1];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;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 }
页:
[1]