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>

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