原生JS实现日期选择

JS声明方法

/*
*生日下拉框
*把sel_year、sel_month、sel_day修改即可
*/
var birthday1 = {
    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 monthStr=null;
            var sed = monthSel==i?"selected":"";
            if(i<10){
                monthStr="<option value=\"" + i + "\" "+sed+">" + '0' +i + "</option>";
            }else{
                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 dayStr=null;
                    var sed = daySel==i?"selected":"";
                    if(i<10){
                        dayStr = "<option value=\"" + i + "\" "+sed+">" + +'0'+i + "</option>";
                        // dayStr =`<option>0${i}</option>`

                    }else{
                        dayStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
                        // dayStr =`<option>${i}</option>`
                    }
                    $DaySelector.append(dayStr);
                }
            }
        }
        $MonthSelector.change(function () {
            BuildDay();
        });
        $YearSelector.change(function () {
            BuildDay();
        });
        if($DaySelector.attr("rel")!=""){
            BuildDay();
        }
    }
}

HTML

<select id="year" rel="2020"></select> 年
<select id="month" rel="05"></select> 月
<select id="day" rel="12"></select> 日

JS调用

$(function() {
　　　　//声明三个下拉框
        birthday.date_picker({
            YearSelector:  "#year",
            MonthSelector: "#month",
            DaySelector:   "#day",
        });
　　　　　　
　　　　//调用三个下拉框点击事件
        birchange("year");
        birchange("month");
        birchange("day")；
}

下拉框点击事件

    function birchange(field){
        $("#"+field).change(function(){
            $.ajax({
                url:"../php/zyf.php",
                data:{type:"birthday",num:field,val:$(this).val()},
                success:function(res){
                    if(res == "ok"){
                        layer.msg('修改成功');
                    }
                    window.location.reload();
                }
            })
        })
    }

后台就是表单接收字段，就不献丑了