如何在jQuery Datepicker的beforeShowDay中高亮对象内的日期值

我明白你想通过beforeShowDay函数来高亮highdate对象里的特定日期，同时结合hightext的提示文本实现完整效果。咱们一步步调整代码，搞定这个需求：

1. 先明确数据结构 #

假设你的highdate和hightext是这样的（如果你的实际结构不同，对应调整即可）：

// 存储需要高亮的日期
const highdate = {
  date1: "2018-04-04",
  date2: "2018-04-30"
};

// 存储对应日期的提示文本，键和highdate的日期字符串一致
const hightext = {
  "2018-04-04": "这是第一个需要高亮的日期",
  "2018-04-30": "这是第二个需要高亮的日期"
};

2. 关键：日期格式统一匹配 #

beforeShowDay接收的参数是原生Date对象，咱们需要把它转换成和highdate里一致的YYYY-MM-DD格式，才能准确判断是否需要高亮。写个辅助函数来做格式化：

// 把Date对象转成YYYY-MM-DD格式的字符串
function formatDate(date) {
  const year = date.getFullYear();
  // 月份是从0开始的，所以要+1，并且补0保证两位
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

3. 实现beforeShowDay核心逻辑 #

在Datepicker的配置里，用beforeShowDay判断当前日期是否在高亮列表中，返回对应的状态、样式和提示：

$("#datepicker").datepicker({
  beforeShowDay: function(date) {
    const currentDateStr = formatDate(date);
    // 把highdate里的日期提取成数组，方便判断
    const highlightedDateList = Object.values(highdate);

    if (highlightedDateList.includes(currentDateStr)) {
      // 返回数组：[是否允许点击, 高亮CSS类名, hover提示文本]
      return [true, 'highlighted-date', hightext[currentDateStr] || ''];
    }
    // 默认情况：允许点击，无特殊样式，无提示
    return [true, '', ''];
  }
});

4. 添加高亮样式（必不可少） #

写CSS让高亮效果看得见，注意加!important覆盖Datepicker的默认样式：

.highlighted-date {
  background-color: #ffeb3b !important;
  color: #333 !important;
  font-weight: bold;
  border-radius: 4px;
}

常见问题排查 #

• 如果日期匹配失败：检查formatDate生成的字符串和highdate里的格式是否完全一致（比如月份/日期是不是两位，有没有补0）
• 如果提示文本不显示：确认hightext的键和格式化后的日期字符串完全匹配
• 如果样式不生效：确认CSS类名和beforeShowDay返回的类名一致，并且加了!important覆盖默认样式

这样调整后，2018-04-04和2018-04-30这两个日期就会被高亮显示，鼠标悬停时还能看到对应的提示文本啦。

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