突出显示当前日期

Question

My function displays the current date along with the next 60 days however I want the current date to be highlighted. What would be the best approach?

var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();

var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;


for(var day = 0; day < 60; day++) {
    var date = new Date();
    date.setDate(date.getDate() + day);

    var cell = document.createElement("li");
    var cellText = document.createTextNode(day);

    var date = ('0' + date.getDate()).slice(-2) + ' '
    + monthNames[date.getMonth()] + ' '
    // + date.getFullYear();

    cell.innerHTML = date;
    dateRange.appendChild(cell);
}

Answer 1

Since you're always showing the next 60 days, the current date is always the first date in the list, so it's easy to target with a CSS selector. For example:

#calendar-table-range li:first-child {
  background-color: yellow;
}

Answer 2

Another way to go about it is to create a timestamp in the same format as the dates in the range then search for it.

Eg the following, which puts formatting into a separate function and removes code that wasn't being used:

 function formatDate(d){ let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; return ('0 ' + d.getDate()).slice(-2) + ' ' + monthNames[d.getMonth()]; } function highlightToday() { let today = formatDate(new Date()); let cells = document.querySelectorAll('#calendar-table-range > li'); for (var i=0, iLen=cells.length; i<iLen; i++) { if (cells[i].textContent == today) { cells[i].style.color = 'red'; return; } } } var date = new Date(); var dayInt = date.getDate(); var month = date.getMonth(); var year = date.getFullYear(); var dateRange = document.getElementById('calendar-table-range'); var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; document.getElementById("month").innerHTML = monthNames[month]; document.getElementById("year").innerHTML = year; for(var day = 0; day < 6; day++) { var date = new Date(); date.setDate(date.getDate() + day); var cell = document.createElement("li"); var date = formatDate(date); cell.innerHTML = date; dateRange.appendChild(cell); }

 <div id="month"></div> <div id="year"></div> <input type="button" onclick="highlightToday()" value="highlight today"> <ol id="calendar-table-range"> </ol>