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">«</div> <div id="novi_mesec" class="arrows righ_arrow">»</div> </div> </div>
内容的提问来源于stack exchange,提问作者Aleksandar
相关产品推荐
相关产品推荐

