Datepicker无法高亮指定日期 技术求助

问题根源及修正步骤 #

以下是导致你高亮失效的几个核心问题及对应修复方案：

1. 原生日期控件冲突

你在Django的DateInput中设置了type='date'，这会让浏览器渲染原生日期选择器，直接覆盖jQuery UI的Datepicker组件。

修正代码（Django Form）：

class BookingForm(forms.ModelForm):
    class Meta:
        model = Booking
        fields = ('booking_date', 'booking_time', 'number_attending')
        widgets = {
            # 移除type='date'，改用text类型让jQuery UI接管
            'booking_date': DateInput(attrs={'id': 'datepicker', 'type': 'text'})
        }

2. 高亮逻辑颠倒

你的beforeShowDay判断逻辑写反了：当前是非目标日期添加高亮类，应该改为目标日期才添加类。

修正代码（script.js）：

// 包裹在DOM加载完成事件中，确保元素已存在
$(document).ready(function() {
    var dates = ['14-10-2023', '15-10-2023', '16-10-2023'];

    $('#datepicker').datepicker({
        beforeShowDay: function(date) {
            var string = $.datepicker.formatDate('dd-mm-yyyy', date);
            // 当日期在目标数组中时，返回高亮类
            if ($.inArray(string, dates) !== -1) {
                return [true, 'highlighted-date'];
            } else {
                return [true, ''];
            }
        }
    });
});

3. CSS样式优先级不足

jQuery UI的日期单元格默认样式优先级较高，普通类选择器无法覆盖，需要提升选择器权重。

修正代码（CSS）：

/* 直接针对jQuery UI的日期链接元素设置样式 */
.ui-datepicker-calendar .highlighted-date a {
    color: red !important;
    background-color: #ffebee; /* 可选：添加背景色增强高亮效果 */
}

4. 脚本加载顺序错误

确保你的自定义脚本在jQuery和jQuery UI之后加载，否则会出现找不到方法的错误。

正确的脚本加载顺序：

<script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"
></script>
<script
    src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"
    integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY="
    crossorigin="anonymous"
></script>
<!-- 自定义脚本必须放在最后 -->
<script src="/path/to/your/script.js"></script>

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