阻止Javascript日期选择器上的特定日期

Question

我想请求关于如何阻止我的日期选择器上的特定日期的帮助。

的具体日期是：12月24日、25日、30日、31-2020年和2021年1月1日ONLY。

注意:我们需要保持当前的功能，选择的可用日期从今天起提前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;


}