zoukankan      html  css  js  c++  java
  • jQuery插件:简易年月日选择器

     基于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);
  • 相关阅读:
    网页性能分析
    vue学习图解
    px-em-rem单位转换
    呼啦圈(keyframes和transform结合)
    菜单栏鼠标经过伸缩效果
    携程transform放大效果
    浮动布局demo
    倒圆角艺术
    伪类分类
    ingress-nginx 添加https证书
  • 原文地址:https://www.cnblogs.com/lr393993507/p/5286587.html
Copyright © 2011-2022 走看看