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

Question

I would like to request assistance on how can I block a specific dates on my date selector.

Specific dates are: December 24, 25, 30, 31 - 2020 and January 1, 2021 ONLY .

Note: We need to remain the current function where the selected available dates are 2 days advanced from today. Weekends are also blocked. This functions are already in the script

<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

You can do something like this.

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;


}