如何为Table日历高亮当前日期？现有代码实现失败求助

核心思路 #

要高亮当前日期，关键是在渲染日历单元格时，将单元格的日期与本地当前日期做精确匹配，匹配成功则添加自定义CSS类来设置背景样式。

具体步骤 #

• 第一步：获取本地当前日期的年、月、日数值

  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth(); // 月份从0开始
  const currentDay = today.getDate();
  

• 第二步：在生成日历每个日期单元格的逻辑中，添加匹配判断
  假设你生成日期的逻辑是循环创建每个<td>元素，在给单元格赋值日期时，同时判断该日期的年、月、日是否与当前日期完全一致：

  // 假设date是当前单元格对应的Date对象
  if (date.getFullYear() === currentYear && date.getMonth() === currentMonth && date.getDate() === currentDay) {
    // 添加高亮类
    tdElement.classList.add('today-highlight');
  }
  

• 第三步：添加对应的CSS样式

  .today-highlight {
    background-color: #ffeb3b; /* 黄色高亮，可自行调整 */
    font-weight: bold;
    border-radius: 50%; /* 可选，圆形高亮 */
  }
  

注意事项 #

• 必须同时匹配年、月、日三个维度，避免跨月的同名日期被误高亮（比如上月31号和当月31号）
• 如果你的日历是基于周日起始的周历，要确保日期对象的计算逻辑正确，不要出现日期偏移的情况
• 若使用UTC日期计算，注意转换为本地时间再做匹配，避免时区差异导致的错误

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