jQuery select年月日(生日)选择器

实际项目中，在用户的个人中心，编辑用户资料时经常会遇到选择生日选项的问题。

因为我项目工程中没有使用如jQuery UI的插件性下拉列表，所以选择select + option的原生方式，实现选择器。

能够准确计算闰年的年月日，方便表单处理。

实际效果如下图，式样略粗糙

HTML

生日中的年月日以<select>下拉方式，我们给每个select加个rel的属性，当已知用户生日时，直接通过rel属性标注，插件会将rel属性的数值转换成select的值。

[html] view plain cop

<select id="date-sel-year" rel="2015"></select>年 

<select id="date-sel-month" rel="9"></select>月

<select id="date-sel-day" rel="10"></select>日

jQuery

[javascript] view plain copy

$.date_picker({ 

YearSelector:  "#date-sel-year",  

MonthSelector: "#date-sel-month",  

DaySelector:   "#date-sel-day" 

});  

$.ms_DatePicker();  

******

实际使用，最终提交时，需要获得用户输入的生日，直接 $('#date-sel-year').val() 可以获得select的内容，

有时页面逻辑是，显示生日，用户点击 [编辑] 按钮后，初始化select的内容，此时用 $('#date-sel-year').val(year) 可以完成赋值的操作。

这时候，需要注意的是，很多生日显示时，会显示为，2015-09-01，但是直接赋值 09 给date-sel-month，是不能正确显示的。

需要判断如果变量第一个字符是0，要将第二位的字符赋值给select。

******

以下是插件的具体代码：

[javascript] view plain copy

    (function($){  
        $.extend({  
            date_picker: function(options){  
                var defaults = {  
                    YearSelector: "#sel_year",  
                    MonthSelector: "#sel_month",  
                    DaySelector: "#sel_day",  
                    FirstText: "--",  
                    FirstValue: 0  
                };  
                var opts = $.extend({}, defaults, options);  
                var $YearSelector = $(opts.YearSelector);  
                var $MonthSelector = $(opts.MonthSelector);  
                var $DaySelector = $(opts.DaySelector);  
                var FirstText = opts.FirstText;  
                var FirstValue = opts.FirstValue;  
          
                // 初始化  
                var str = "<option value="" + FirstValue + "">" + FirstText + "</option>";  
                $YearSelector.html(str);  
                $MonthSelector.html(str);  
                $DaySelector.html(str);  
          
                // 年份列表  
                var yearNow = new Date().getFullYear();  
                var yearSel = $YearSelector.attr("rel");  
                for (var i = yearNow; i >= 1900; i--) {  
                    var sed = yearSel==i?"selected":"";  
                    var yearStr = "<option value="" + i + "" " + sed+">" + i + "</option>";  
                    $YearSelector.append(yearStr);  
                }  
          
                // 月份列表  
                var monthSel = $MonthSelector.attr("rel");  
                for (var i = 1; i <= 12; i++) {  
                    var sed = monthSel==i?"selected":"";  
                    var monthStr = "<option value="" + i + "" "+sed+">" + i + "</option>";  
                    $MonthSelector.append(monthStr);  
                }  
          
                // 日列表(仅当选择了年月)  
                function BuildDay() {  
                    if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {  
                        // 未选择年份或者月份  
                        $DaySelector.html(str);  
                    } else {  
                        $DaySelector.html(str);  
                        var year = parseInt($YearSelector.val());  
                        var month = parseInt($MonthSelector.val());  
                        var dayCount = 0;  
                        switch (month) {  
                            case 1:  
                            case 3:  
                            case 5:  
                            case 7:  
                            case 8:  
                            case 10:  
                            case 12:  
                                dayCount = 31;  
                                break;  
                            case 4:  
                            case 6:  
                            case 9:  
                            case 11:  
                                dayCount = 30;  
                                break;  
                            case 2:  
                                dayCount = 28;  
                                if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {  
                                    dayCount = 29;  
                                }  
                                break;  
                            default:  
                                break;  
                        }  
                          
                        var daySel = $DaySelector.attr("rel");  
                        for (var i = 1; i <= dayCount; i++) {  
                            var sed = daySel==i?"selected":"";  
                            var dayStr = "<option value="" + i + "" "+sed+">" + i + "</option>";  
                            $DaySelector.append(dayStr);  
                        }  
                    }  
                }  
                $MonthSelector.change(function () {  
                    BuildDay();  
                });  
                $YearSelector.change(function () {  
                    BuildDay();  
                });  
                if($DaySelector.attr("rel")!=""){  
                    BuildDay();  
                }  
            }  
        });  
    })(jQuery);