如何为jQuery UI Datepicker中指定禁用日期及周日添加高亮

要实现禁用日期（指定日期和周日）的高亮，且仅高亮当前日期及之后的禁用日期，你可以按以下步骤修改代码：

1. 添加高亮样式 #

首先在CSS里定义一个用于高亮禁用日期的类：

.highlight-blocked {
    background-color: #ffcccc !important; /* 浅红色高亮，可自行调整颜色 */
    color: #cc0000 !important;
}

2. 修改beforeShowDay函数 #

在原函数里增加日期范围判断，仅对当前及之后的禁用日期添加高亮类，修改后的完整JS代码如下：

$(document).ready(function(){
    jQuery(function() {
        var blockedDates = ["12/20/2022", "12/28/2022", "12/24/2022", "12/19/2022"];
        // 获取今天的日期（清除时分秒，避免时间对比误差）
        var today = new Date();
        today.setHours(0, 0, 0, 0);

        $( "#datepicker" ).datepicker({
            dateFormat:'yy-mm-dd',
            minDate: 0,
            daysOfWeekDisabled: [0, 6],
            onSelect: function(dateStr) {
                var _frmdate = $.trim($(this).val());
                jQuery("#blockModalDateItem").modal("show");
                jQuery("#bk_blockdt").val(_frmdate);
                jQuery(".status_msg").html("");
            },
            beforeShowDay: function(date){
                let show = true;
                let highlightClass = '';
                // 清除当前遍历日期的时分秒，统一对比维度
                var currentDate = new Date(date);
                currentDate.setHours(0, 0, 0, 0);

                // 判断是否为禁用日期（周日或在禁用列表中）
                if(date.getDay() === 0){
                    show = false;
                }
                for (var i = 0; i < blockedDates.length; i++) {
                    var blockedDate = new Date(blockedDates[i]);
                    blockedDate.setHours(0, 0, 0, 0);
                    if (currentDate.toString() === blockedDate.toString()) {
                        show = false;
                        break;
                    }
                }

                // 仅对今天及之后的禁用日期添加高亮类
                if(!show && currentDate >= today){
                    highlightClass = 'highlight-blocked';
                }

                return [show, highlightClass, (show)?'':'Block Settlement Date'];
            }    
        });
    });
});

关键说明 #

• 清除日期的时分秒是为了避免因时间部分差异导致的对比错误，确保日期判断准确
• 只有同时满足「禁用状态」和「不早于今天」两个条件的日期，才会应用高亮样式
• CSS中的!important用于覆盖jQuery UI Datepicker默认的日期样式，保证高亮效果生效

内容的提问来源于stack exchange，提问作者Ravina Madhani