如何为jQuery Datepicker的每月第一、第三个周六应用CSS样式？

很简单，咱们可以利用jQuery Datepicker提供的beforeShowDay回调函数来搞定这个需求——这个函数会在每个日期渲染前被调用，我们可以在这里判断日期是否符合条件，然后给它加上自定义的CSS类。

第一步：定义自定义CSS样式 #

先写好要应用的样式，比如修改背景色，你可以根据自己的需求调整细节：

/* 自定义第一个/第三个周六的基础样式 */
.highlight-saturday {
    background-color: #ffd6d6 !important; /* 加!important确保覆盖默认UI样式 */
    color: #333 !important;
    border-radius: 4px;
}

/* 可选：鼠标hover时的样式增强 */
.highlight-saturday.ui-state-hover {
    background-color: #ffb3b3 !important;
}

第二步：初始化Datepicker并配置回调 #

接下来在初始化Datepicker的时候，配置beforeShowDay函数来识别目标日期：

$(function() {
    // 假设你的日期选择器元素ID是datepicker，按需替换成自己的选择器
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            // 先判断当前日期是不是周六（JavaScript中getDay()返回0=周日，6=周六）
            if (date.getDay() === 6) {
                // 计算这个周六是当月的第几个周六
                const dayOfMonth = date.getDate();
                const saturdayIndex = Math.floor((dayOfMonth - 1) / 7) + 1;
                
                // 如果是第一个或第三个周六，返回允许选择+自定义类名+tooltip文本
                if (saturdayIndex === 1 || saturdayIndex === 3) {
                    return [true, "highlight-saturday", "当月第" + saturdayIndex + "个周六"];
                }
            }
            // 其他日期正常显示，返回允许选择+空类名+空tooltip
            return [true, "", ""];
        }
    });
});

关键逻辑解释 #

• beforeShowDay回调：每个日期渲染前都会执行这个函数，返回的数组包含三个核心值：
  1. 第一个值true表示该日期允许被选择（设为false会直接禁用该日期）
  2. 第二个值是要添加的CSS类名，对应我们提前定义的样式
  3. 第三个值是鼠标悬停时的提示文本，属于可选配置
• 判断周六序号：Math.floor((dayOfMonth - 1)/7) + 1这个计算逻辑很通用——不管当月第一天是星期几，都能准确算出当前周六是当月的第几个：1-7号的周六是第1个，8-14号是第2个，15-21号是第3个，以此类推。

这样设置之后，每个月的第一个和第三个周六就会自动应用你定义的背景色样式啦！

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