JQuery/JS 使用select option 选择日期并限制范围

查资料的时候发现，大部分人选择日期都直接使用.datepicker或是<input type="date">
但需求方希望年、月、日能够分开选择
同时平日及假日可联系的时间选项不同，所以还要另外判断星期
预设日期及最小日期皆为今日

Code Pen程序码预览 https://codepen.io/shih-min-chou/pen/WNpVNON

日期下拉选项参考 https://www.itread01.com/content/1550230923.html

当然感觉很多多余的code，但就先单纯记录一下

<div class="form-group col-12">
    <label>选择时间</label>
    <div class="form-row align-items-center">
        <div class="form-group col-md-4 col-4">
            <select name="meetDayYY" id="meetYear" class="form-control" onchange="setDays(this, meetMonth, meetDay); getDay(); changeYear();">
            </select>
            <span class="mx-md-3 mx-0">年</span>
        </div>
        <div class="form-group col-md-4 col-4">
            <select name="meetDayMM" id="meetMonth" class="form-control" onchange="setDays(meetYear, this, meetDay); getDay(); changeMonth();">
            </select>
            <span class="mx-md-3 mx-0">月</span>
        </div>
        <div class="form-group col-md-4 col-4">
            <select name="meetDayDD" id="meetDay" class="form-control" onchange="getDay()">
            </select>
             <span class="mx-md-3 mx-0">日</span>
        </div>
    </div>
    <div class="form-group col-12" id="weekDaily">
        <div class="cntr">
            <label for="contact-time01" class="radio">
                <input type="radio" name="rdo" id="contact-time01" />
                <span class="label"></span>09:00-11:00
            </label>
            <label for="contact-time02" class="radio">
                <input type="radio" name="rdo" id="contact-time02" />
                <span class="label"></span>11:00-13:00
            </label>
            <label for="contact-time03" class="radio">
                <input type="radio" name="rdo" id="contact-time03" />
                <span class="label"></span>13:00-15:00
            </label>
            <label for="contact-time04" class="radio">
                <input type="radio" name="rdo" id="contact-time04" />
                <span class="label"></span>15:00-17:00
            </label>
            <label for="contact-time05" class="radio">
                <input type="radio" name="rdo" id="contact-time05" />
                <span class="label"></span>17:00-20:00
            </label>
        </div>
    </div>
    <div class="form-group col-12" id="weekend">
        <div class="cntr">
            <label for="contact-time11" class="radio">
                <input type="radio" name="rdo" id="contact-time11" />
                <span class="label"></span>10:00-12:00
            </label>
            <label for="contact-time12" class="radio">
                <input type="radio" name="rdo" id="contact-time12" />
                <span class="label"></span>12:00-14:00
            </label>
            <label for="contact-time13" class="radio">
                <input type="radio" name="rdo" id="contact-time13" />
                <span class="label"></span>14:00-17:00
            </label>
        </div>
    </div>
</div>
                                    
<script>
    var currentYear = new Date().getFullYear();
    var currentMonth = new Date().getMonth() + 1;
    var currentDay = new Date().getDate();
    var currentWeek = new Date().getDay();

    // 年份
    for (i = currentYear; i <= currentYear + 1; i++) {
        addOption(meetYear, i, i);
    }

    // 新增月份
    for (i = currentMonth; i <= 12; i++) {
        addOption(meetMonth, i, i);
    }

    // 设定每个月份的天数
    function setDays(year, month, day) {
        var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var yea = year.options[year.selectedIndex].text;
        var mon = month.options[month.selectedIndex].text;
        var num = monthDays[mon - 1];
        if (mon == 2 && isLeapYear(yea)) {
            num++;
        }
        for (var j = day.options.length - 1 ; j >= num; j--) {
            day.remove(j);
        }
        for (var i = day.options.length + 1; i <= num; i++) {
            addOption(meetDay, i, i);
        }
    }
    // 限定每个月份的天数
    function currentDays(year, month, day) {
        var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var yea = year.options[year.selectedIndex].text;
        var mon = month.options[month.selectedIndex].text;
        var num = monthDays[mon - 1];
        if (mon == 2 && isLeapYear(yea)) {
            num++;
        }
        for (var j = currentDay; j >= num; j--) {
            day.remove(j);
        }
        for (var i = currentDay; i <= num; i++) {
            addOption(meetDay, i, i);
        }
    }

    // 判断是否闰年
    function isLeapYear(year) {
        return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0));
    }
    // 向select尾部新增option
    function addOption(selectbox, text, value) {
        var option = document.createElement("option");
        option.text = text;
        option.value = value;
        selectbox.options.add(option);
    }

// 以上下拉选单程序码参考 https://www.itread01.com/content/1550230923.html

    // 将今天月份设为预设
    $("select[name=meetDayMM] option").each(function () {
        if ($(this).text() == currentMonth)
            $(this).attr("selected", "selected");
    });

    window.onload = setDays(meetYear, meetMonth, meetDay);

    // 今天日期设为预设
    $("select[name=meetDayDD] option").each(function () {
        if ($(this).text() == currentDay)
            $(this).attr("selected", "selected");
    });

    // 取得星期并切换选项
    function getDay() {
        // 取得选取的 年份 月份 日期
        var selectYY = $('select[name=meetDayYY] option').filter(':selected').val()
        var selectMM = $('select[name=meetDayMM] option').filter(':selected').val()
        var selectDD = $('select[name=meetDayDD] option').filter(':selected').val()

        // 取得选取的月份名称
        function getMonthName(selectMM) {
            return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][selectMM - 1];
        }
        var monthName = getMonthName(selectMM);

        // 取得选取之星期
        var selectDay = new Date(monthName + ' ' + selectDD + ',' + selectYY + ' 23:15:30');
        var dayOfWeek = selectDay.getDay();
        //console.log(dayOfWeek);

        // 6 = Saturday, 0 = Sunday
        if ((dayOfWeek === 6) || (dayOfWeek === 0)) {
            $('#weekDaily').attr('class', 'form-group col-12 d-none');
            $('#weekend').attr('class', 'form-group col-12 d-block');
        } else {
            $('#weekDaily').attr('class', 'form-group col-12 d-block');
            $('#weekend').attr('class', 'form-group col-12 d-none');
        }
    }

    function changeYear() {
        var selectYY = $('select[name=meetDayYY] option').filter(':selected').val()
        // 仅显示当年度大於今日之月份
        if (selectYY == currentYear) {
            $('#meetMonth').find('option').remove().end();
            for (i = currentMonth; i <= 12; i++) {
                addOption(meetMonth, i, i);
            }
        } else {
            $('#meetMonth').find('option').remove().end();
            for (i = 1; i <= 12; i++) {
                addOption(meetMonth, i, i);
            }
        }
        changeMonth();
    }

    function changeMonth() {
        var selectYY = $('select[name=meetDayYY] option').filter(':selected').val()
        var selectMM = $('select[name=meetDayMM] option').filter(':selected').val()
        // 仅显示当年度大於今日之日期
        if (selectMM == currentMonth && selectYY == currentYear) {
            $('#meetDay').find('option').remove().end();
            currentDays(meetYear, meetMonth, meetDay);
        } else {
            $('#meetDay').find('option').remove().end();
            setDays(meetYear, meetMonth, meetDay);
        }
    }

    window.onload = getDay(), changeMonth();

</script>

首次发文，还在努力练习中