如何利用jQuery Datepicker高亮表头中选中的星期几？

嘿，这个需求不难实现，咱们可以结合jQuery Datepicker的事件回调和DOM操作来定位并修改表头的星期元素样式，具体步骤如下：

1. 核心逻辑梳理 #

当用户选中某个日期（或者日历初始化时已有选中日期），我们先拿到这个日期对应的星期几，然后找到表头里对应的星期标签（比如你提到的Tu），给它加上高亮样式（比如粗体）。

2. 具体代码实现 #

首先先定义高亮用的CSS样式：

.highlight-weekday {
    font-weight: bold;
    /* 可选：再加个颜色让高亮更醒目 */
    color: #e74c3c;
}

然后在初始化Datepicker时，绑定关键事件并封装高亮逻辑：

$(function() {
    $("#your-datepicker-id").datepicker({
        // 用户选中日期时触发高亮逻辑
        onSelect: function(dateText, inst) {
            highlightTargetWeekday(inst);
        },
        // 日历弹窗打开时触发，处理初始化已有选中日期的场景
        beforeShow: function(input, inst) {
            const selectedDate = $(this).datepicker('getDate');
            if (selectedDate) {
                // 加个小延迟确保表头DOM已渲染完成
                setTimeout(() => highlightTargetWeekday(inst), 10);
            }
        }
    });

    // 封装高亮逻辑，提升复用性
    function highlightTargetWeekday(inst) {
        // 先移除之前的高亮样式，避免多个星期同时高亮
        inst.dpDiv.find('.ui-datepicker-week-header th').removeClass('highlight-weekday');
        
        // 获取选中日期的星期索引：0=周日(Su)，1=周一(Mo)...6=周六(Sa)
        const selectedWeekdayIndex = $(inst.input).datepicker('getDate').getDay();
        
        // 定位到表头对应位置的星期元素，添加高亮类
        inst.dpDiv.find('.ui-datepicker-week-header th').eq(selectedWeekdayIndex).addClass('highlight-weekday');
    }
});

3. 关键细节说明 #

• onSelect事件：这是用户选中日期时的触发点，在这里调用高亮函数能保证样式更新的及时性。
• beforeShow事件：处理日历刚打开时已有默认选中日期的场景，加setTimeout是为了确保Datepicker的表头DOM完全渲染，避免出现找不到元素的情况。
• inst.dpDiv：这是Datepicker弹窗的容器对象，通过它可以精准定位到默认表头（类为ui-datepicker-week-header）的星期元素。
• getDay()方法：JS原生方法，返回0-6的数字，刚好对应表头从Su到Sa的顺序，完美匹配我们要找的元素位置。

4. 适配自定义表头结构 #

如果你的Datepicker表头是自定义HTML结构（比如不是默认的<th>标签），只需要调整inst.dpDiv.find()里的选择器即可。比如你的星期标签是带weekday-label类的<span>，就改成inst.dpDiv.find('.weekday-label')。

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