• 年月日选择器


    html部分:

    <select class="sel_year" rel="2000"> </select><select class="sel_month" rel="2"> </select><select class="sel_day" rel="14"> </select>

     js部分:(此处需要引入jquery.js)

    <script>
        $(function () {
            $.ms_DatePicker({
                YearSelector: ".sel_year",
                MonthSelector: ".sel_month",
                DaySelector: ".sel_day"
            });
        });
        (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();
                    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();
                    }
                } // End ms_DatePicker
            });
        })(jQuery);
    </script>
  • 相关阅读:
    thingsboard学习笔记
    Java8 Lambda表达式之循环使用
    LocalDateTime使用记录
    mqtt之wss功能
    OpenSSL证书合成
    Apache Commons IO使用
    visio A3设计图如何在A4纸上打印
    MSDE数据库附加
    电脑C盘application data拒绝访问的解决方法
    64位WIN7+oracle11g+plsql安装
  • 原文地址:https://www.cnblogs.com/shanhaihong/p/5690669.html
Copyright © 2020-2023  润新知