在 Javascript 日期選擇器上阻止特定日期

Question

我想請求有關如何在我的日期選擇器上阻止特定日期的幫助。

具體日期為： 2020 年 12 月 24 日、25 日、30 日、31 日至2021年 1 月 1 日。

注意：我們需要保留當前的 function，其中選定的可用日期比今天提前 2 天。 周末也被封鎖。 此函數已在腳本中

<style>
select {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; color:#000;
}
</style>

<select name="APPOINTMENTDATE" id="date-range" data-field-type="Text">
   <option value="" selected="selected">Select date</option>
</select>

<script>
    var dateRange = document.getElementById('date-range'),
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    for(var day = 2; day < 30; day++) {
        var date = new Date();
        date.setDate(date.getDate() + day);
        if(!(date.getDay()==6|| date.getDay()==0))
            dateRange.options[dateRange.options.length] = new Option([monthNames[date.getMonth()], date.getDate(), date.getFullYear()].join(' '));
    }
</script>

Answer 1

你可以做這樣的事情。

var dateRange = document.getElementById('date-range'),
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

for (var day = 2; day < 30; day++) {
    var date = new Date();
    date.setDate(date.getDate() + day);

    if (!(date.getDay() == 6 || date.getDay() == 0)) {

        dateRange.options[dateRange.options.length] = new Option(
            [monthNames[date.getMonth()],
                date.getDate(),
                date.getFullYear()
            ].join(' '));
    }

}

//define dates to be blocked.
var arr = ["Dec 24 2020", "Dec 25 2020", "Dec 30 2020", "Dec 31 2020", "Jan 01 2021"];

//loop through dateRange.options
for (var i = 1; i < dateRange.options.length; i++) {    
    //when date to be blocked found, mark it as disabled
    arr.includes(dateRange.options[i].value) ? dateRange.options[i].disabled = true : dateRange.options[i].disabled = false;


}