如何在jQuery中实现日历日期动态高亮？静态高亮正常但动态失效

我来帮你搞定这个动态高亮日期的问题！你的代码里有两个关键问题导致动态加载的日期无法高亮，咱们一步步拆解：

问题分析 #

1. 异步AJAX的时序问题：AJAX请求是异步执行的，你现在是先发起AJAX，然后立刻初始化datepicker——这时候AJAX还没拿到数据，eventDates还是空的，所以datepicker的beforeShowDay自然找不到要高亮的日期。
2. 数据结构不匹配：你把eventDates定义成了数组，但却试图用Date对象作为键来取值（eventDates[date]）。数组的键只能是数字索引，这样的取值方式根本找不到对应的数据，而你静态设置的时候其实是给数组添加了一个非数字属性，刚好能被取到，但这不是正确的用法。

修复方案 #

我们需要调整数据结构和代码执行顺序，具体修改如下：

1. 把eventDates从数组改成对象，这样可以用格式化后的日期字符串（或Date对象）作为键来存储需要高亮的日期。
2. 将datepicker的初始化逻辑放到AJAX的success回调里，确保只有当数据加载完成后，才初始化日历并传入正确的高亮日期。
3. 修正CTD函数，让它返回Date对象（而不是字符串），这样能和beforeShowDay传入的date参数类型匹配，同时用统一的字符串格式作为键，避免Date对象的时区/精度问题。

修改后的完整代码 #

$(function() {
    // 把eventDates改成对象，用来存储需要高亮的日期
    var eventDates = {};
    
    $.ajax({
        type: "GET",
        url: "@Url.Action(\"GetEvents\", \"Home\")",
        dataType: "json",
        success: function(data) {
            $.each(data, function(i, val) {
                var dd = CTD(val.Date); // 转换为标准Date对象
                // 用toDateString()生成统一格式的日期字符串作为键，避免时区差异
                eventDates[dd.toDateString()] = dd;
            });
            
            // 数据加载完成后，再初始化datepicker
            $('#datepicker').datepicker({
                beforeShowDay: function(date) {
                    // 把当前日期转换成和存储时一致的格式
                    var dateKey = date.toDateString();
                    var highlight = eventDates[dateKey];
                    if (highlight) {
                        return [true, "event", 'Tooltip text'];
                    } else {
                        return [true, '', ''];
                    }
                }
            });
        }
    });

    // 转换为日期函数：处理.NET的JSON日期格式，返回标准Date对象
    function CTD(d) {
        var timestamp = parseInt(d.substr(6));
        return new Date(timestamp);
    }
});

额外说明 #

• 用toDateString()转换日期是为了避免不同Date对象的精度/时区差异（比如时间部分不同导致键不匹配），确保同一天的日期能被正确识别。
• 如果你的后端返回的日期格式不是.NET的/Date(xxxx)/，可以调整CTD函数的逻辑来适配你的日期格式。

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