为带范围选择器的jQuery UI日历实现日期高亮

嘿，刚好你已经用到了beforeShowDay，这正是实现日期高亮的关键！咱们只需要在这个回调里判断日期是否为当天，然后给不同的日期分配对应的CSS类就行。

步骤1：先定义样式类 #

首先在CSS里写好当天和其他日期的样式：

/* 当天日期样式：红色 */
.current-day {
  background-color: #ff4444 !important;
  color: white !important;
  font-weight: bold;
}

/* 其他日期样式：绿色 */
.other-day {
  background-color: #4CAF50 !important;
  color: white !important;
}

这里加!important是为了覆盖jQuery UI的默认样式，确保咱们的自定义样式能优先生效。

步骤2：修改beforeShowDay回调逻辑 #

接下来调整你现有的beforeShowDay函数，判断每个日期是否等于当天，返回对应的类：

$(function() {
  // 获取当天日期，统一转成字符串格式用于对比（月份从0开始，所以要+1）
  const today = new Date();
  const todayStr = `${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()}`;

  $("#datepicker").datepicker({
    inline: true,
    rangeSelect: true, // 保留你原有的范围选择功能
    beforeShowDay: function(date) {
      // 将当前遍历到的日历日期转成和当天一致的字符串格式
      const dateStr = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`;
      
      // 判断是否为当天，返回对应配置
      if (dateStr === todayStr) {
        // 返回数组：[日期是否可用, 样式类名, 提示文本]
        return [true, "current-day", "今天"];
      } else {
        return [true, "other-day", ""];
      }
    }
  });
});

关键说明 #

• beforeShowDay会针对日历中的每一个日期执行一次，返回的数组第一个元素控制日期是否可用（这里都设为true，因为咱们只做高亮不做禁用），第二个元素就是要添加的CSS类。
• 日期对比时必须统一格式，避免因为月份/日期的位数差异（比如3月写成3还是03）导致判断错误，用字符串格式对比是最简单可靠的方式。
• 如果你的范围选择功能需要保留选中日期的样式，可以额外给jQuery UI的选中类（比如.ui-datepicker-range-selected）调整样式，避免和自定义高亮样式冲突。

这样修改后，当天日期就会显示红色，其余日期都变成绿色啦～

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