首页 > Web开发 > 详细

jQuery插件:简易年月日选择器

时间:2016-03-17 12:38:49      阅读:245      评论:0      收藏:0      [点我收藏+]

 基于jquery写的选择年月日出生日期的插件

<li>
<label class="label"><span class="star">*</span>生日:</label>
<select class="sel_year">
</select><select class="sel_month">
</select><select class="sel_day">
</select></li>
 
使用方法:
 
<script type="text/javascript">
$(function () {
// 出生年月插件
$.ms_DatePicker({
YearSelector: ".sel_year",
MonthSelector: ".sel_month",
DaySelector: ".sel_day"
});
});
</script>
 
 
插件代码:
 
(function($){
$.extend({
ms_DatePicker: 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();
            for (var i = yearNow; i >= 1900; i--) {
                var yearStr = "<option value=\"" + i + "\">" + i + "</option>";
                $YearSelector.append(yearStr);
            }
 
            // 月份列表
            for (var i = 1; i <= 12; i++) {
                var monthStr = "<option value=\"" + i + "\">" + 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;
                    }
 
                    for (var i = 1; i <= dayCount; i++) {
                        var dayStr = "<option value=\"" + i + "\">" + i + "</option>";
                        $DaySelector.append(dayStr);
                    }
                }
            }
            $MonthSelector.change(function () {
                BuildDay();
            });
            $YearSelector.change(function () {
                BuildDay();
            });
        } // End ms_DatePicker
});
})(jQuery);

 

jQuery插件:简易年月日选择器

原文:http://www.cnblogs.com/lr393993507/p/5286587.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!