You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

jQuery自定义日历当日红色边框失效 仅4月21日不显示排查

自定义日历当日红边框高亮失效问题

我为客户开发的自定义日历,功能为当前月份视图下,为当日的日期数字单元格添加红色边框作为高亮标识。该功能此前一直运行正常,今日运行时红色边框突然消失。
经多轮测试验证,异常特征如下:

  • 仅在当前日期为4月21日时触发
  • 切换查看其他任意月份日期时,红色边框均可正常显示
  • 单独手动指定日期实例化测试(例如 var novi_datum = new Date(2021, 7, 21))时,功能完全正常

相关代码

JavaScript 代码

$(document).ready(function () {
  var novi_datum = new Date();
  var meseci = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  
  function getDaysInMonth(month, year) {
    var date = new Date(year, month);
    var days = [];
    while (date.getMonth() === month) {
      days.push(new Date(date));
      date.setDate(date.getDate() + 1);
    }
    return days;
  }
  
  function fill_calendar_table(month, year) {
    if (month != null) {
      $('#mesec').html(meseci[novi_datum.getMonth() + month] + ' ' + (novi_datum.getFullYear() + year));
      var dani = getDaysInMonth(novi_datum.getMonth() + month, novi_datum.getFullYear() + year);
    } else {
      $('#mesec').html(meseci[novi_datum.getMonth()] + ' ' + novi_datum.getFullYear());
      var dani = getDaysInMonth(novi_datum.getMonth(), novi_datum.getFullYear());
    }
    var jTrue = true;
    for (let i = 0; i < dani.length; i++) {
      if (jTrue) {
        var j = i;
        j += dani[i].getDay();
        for (let i = 0; i < $('#kalendar td').length; i++) {
          $('#kalendar td')[i].innerHTML = '';
        }
        jTrue = false;
      }
      // 将日期插入日历单元格
      $('#kalendar td')[j + 6].innerHTML = dani[i].getDate();
      // 为当日添加红色边框
      if (
        $('#kalendar td')[i].innerText == novi_datum.getDate()
        && $('#mesec').text().includes(meseci[novi_datum.getMonth()])
        && $('#mesec').text().includes(novi_datum.getFullYear())
      ) {
        $('#kalendar td')[i].style.border = '1px solid red';
      } else {
        $('#kalendar td')[i].style.border = 'none';
      }
      j++;
    }
    var empty_rows = document.querySelectorAll('.last_two_rows');
    empty_rows.forEach(function (red) {
      if (red.children[0].innerHTML == '') {
        red.style.display = 'none';
      } else {
        red.style.display = 'table-row';
      }
    })
    if ($('#kalendar td')[6].innerHTML != '') {
      $('.red')[0].style.display = 'table-row';
    } else {
      $('.red')[0].style.display = 'none';
    }
  }
  
  fill_calendar_table();
  var month_increment = 0;
  var year_increment = 0;
  
  $('#novi_mesec').on('click', function () {
    if ($('#mesec').html().includes(meseci[11])) {
      month_increment -= month_increment + novi_datum.getMonth() + 1;
      year_increment++;
    }
    month_increment++;
    fill_calendar_table(month_increment, year_increment);
  })
  
  $('#prethodni_mesec').on('click', function () {
    if ($('#mesec').html().includes(meseci[0])) {
      month_increment += 12;
      year_increment--;
    }
    month_increment--;
    fill_calendar_table(month_increment, year_increment);
  })
})

CSS 代码

#kalendar {
  margin: 20px auto;
  margin-bottom: 0;
  border-spacing: 10px;
  border-collapse: separate;
  font-size: 15px;
}
#kalendar td, th {
  padding: 5px;
  text-align: center;
}
#naslov {
  font-size: 25px;
  font-weight: 900;
  margin-bottom: 12px;
}
.red:first-of-type {
  display: none;
}
#mesec {
  font-weight: 100;
  font-size: 15px;
  margin-bottom: 12px;
}
.arrows {
  font-size: 40px;
  cursor: pointer;
  display: inline-block;
}
.arrow_parent {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}
.righ_arrow {
  margin-left: 50px;
}
.left_arrow {
  margin-right: 50px;
}
td {
  cursor: default;
}

HTML 代码

<div class="calendar_parent">
  <table id="kalendar">
    <caption id="mesec"></caption>
    <thead>
      <tr>
        <th>m</th>
        <th>t</th>
        <th>w</th>
        <th>t</th>
        <th>f</th>
        <th>s</th>
        <th>s</th>
      </tr>
    </thead>
    <tbody>
      <tr class="red">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr class="red">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr class="red">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr class="red">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr class="red">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr class="red last_two_rows">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr class="red last_two_rows">
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
      </tr>
    </tbody>
  </table>
  <div class="arrow_parent">
    <div id="prethodni_mesec" class="arrows left_arrow">&laquo;</div>
    <div id="novi_mesec" class="arrows righ_arrow">&raquo;</div>
  </div>
</div>

内容的提问来源于stack exchange,提问作者Aleksandar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.24 11:54:08