jQuery date (age) select plug-in

Download address: https://www.helloweba.net/javascript/263.html

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8">
        <title>jQuery Date (birthday) selector</title>
        <style>

        </style>
        <script type="text/javascript" src="jquery.js"></script>
    </head>

    <body>
        <div class="demo">
            <p>
                Default value:<br/>
                <label>Birthday:</label>
                <select class="sel_year" rel="2000"></select>year
                <select class="sel_month" rel="2"></select>month
                <select class="sel_day" rel="14"></select>day
            </p>
        </div>
        <script type="text/javascript" src="birthday.js"></script>
        <script>
            $(function() {
                $.ms_DatePicker({
                    YearSelector: ".sel_year",
                    MonthSelector: ".sel_month",
                    DaySelector: ".sel_day"
                });
                $.ms_DatePicker();
            });
        </script>
    </body>

</html>

birthday.js content: (from github)

(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;

            // Initialization
            var str = "<option value=\"" + FirstValue + "\">" + FirstText + "</option>";
            $YearSelector.html(str);
            $MonthSelector.html(str);
            $DaySelector.html(str);

            // Year list
            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);
            }

            // Month list
            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);
            }

            // Day list (only if month year is selected)
            function BuildDay() {
                if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
                    // No year or month selected
                    $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);

How to get the value of choice?

function getBirthday() {
                var date = "";
                date += $(".sel_year").val();
                date += "-";
                if (parseInt($(".sel_month").val()) < 10) {
                    date += "0";
                    date += $(".sel_month").val();
                } else {
                    date += $(".sel_month").val();
                }
                date += "-";
                if (parseInt($(".sel_day").val()) < 10) {
                    date += "0";
                    date += $(".sel_day").val();
                } else {
                    date += $(".sel_day").val();
                }
                return date;
            }

Original author: qiche girl technology blog: https://www.jianshu.com/u/05f416aefbe1
Post-90s front-end sister, love programming, love operation, literature and code fly together, charm and wisdom coexist.
Insist on summing up the technical problems encountered in the work and recording what you think and see in the work. For the problems on the blog, you can join qq technical exchange group chat: 649040560.

Keywords: Javascript JQuery github Programming

Added by DaveLinger on Sun, 08 Dec 2019 14:34:52 +0200

Programming VIP

jQuery date (age) select plug-in

How to get the value of choice?

Popular Keywords