【发布时间】：2019-05-17 20:47:15
【问题描述】：
我正在制作一个日历，用户可以在其中选择不同的日期。问题是该月的最后一天不可用。我在控制台中看到数组的最后一个索引是未定义的，但是当我记录 HTMLCollection 时，这个索引是可用的。是什么原因？
我尝试了一种不同的循环方式，但结果是一样的。如果你能帮助我，我将不胜感激。谢谢
我的代码在这里：
let todayDate = new Date();
let currentMonth = todayDate.getMonth();
let currentYear = todayDate.getFullYear();
let months = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function showCalendar(month, year) {
let firstDay = (new Date(year, month)).getDay() - 1;
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let calendarBody = document.getElementById("calendar-body"); // body of the calendar
calendarBody.innerHTML = "";
monthAndYear.innerHTML = months[month] + " " + year;
let date = 1;
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
let cell = document.createElement("div");
let cellText = document.createTextNode("");
cell.appendChild(cellText)
calendarBody.appendChild(cell);
cell.classList.add('cell');
}
else if (date > daysInMonth) {
break;
}
else {
let cell = document.createElement("div");
let cellText = document.createTextNode(date);
let textSpan = document.createElement('span');
textSpan.classList.add('span');
textSpan.onclick = getDay();
if (date === todayDate.getDate() && year === todayDate.getFullYear() && month === todayDate.getMonth()) {
textSpan.classList.add('current')
}
if (year < todayDate.getFullYear() ||
(month < todayDate.getMonth() && year === todayDate.getFullYear()) ||
(month === todayDate.getMonth() && date < todayDate.getDate()) && year === todayDate.getFullYear()) {
textSpan.classList.add('is-disabled')
}
textSpan.appendChild(cellText)
cell.appendChild(textSpan);
calendarBody.appendChild(cell);
cell.classList.add('cell');
date++;
}
}
}
}
function getDay() {
let Dates = document.getElementsByClassName("span");
let activeDate = [...Dates];
activeDate.forEach(function (element, i) {
activeDate[i].addEventListener('click', function () {
activeDate[i].classList.add('selected')
})
});
}body {
background: #1E2124;
}
.calendar_block {
display: flex;
align-items: center;
justify-content: center;
}
.calendar {
width: 520px;
z-index: 10;
}
#monthAndYear {
width: 100%;
height: 25px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
}
.weekday {
width: 100%;
height: 30px;
display: flex;
align-items: center;
margin-top: 10px;
justify-content: center;
}
.daysOfWeek {
font-family: 'Lato', sans-serif;
margin-top: 10px;
font-style: normal;
font-weight: 300;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
line-height: 16px;
color: #FFFFFF;
}
.daysOfWeek div {
width: calc(520px/7);
text-align: center;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#calendar-body {
display: flex;
margin-top: 10px;
width: 520px;
flex-wrap: wrap;
}
.cell {
height: 55px;
display: flex;
font-family: Roboto;
font-style: normal;
justify-content: center;
align-items: center;
font-weight: normal;
font-size: 20px;
line-height: 20px;
color: #FFFFFF;
flex-direction: column;
width: 74.25px;
cursor: pointer;
}
.span {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.span:hover {
background: #505A64;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s ease-in-out;
}
.current {
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
background: #121313;
}
.current:hover {
background: #121313;
}
.is-disabled {
cursor: not-allowed;
background: none;
color: rgba(255, 255, 255, 0.12);
height: 40px;
margin-left: 17.14px;
margin-right: 17.14px;
width: 40px;
}
.is-disabled:hover {
cursor: not-allowed;
background: none;
color: rgba(255, 255, 255, 0.12);
height: 40px;
margin-left: 17.14px;
margin-right: 17.14px;
width: 40px;
}
.selected {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.2s ease-in-out;
color: #1E2124;
background: white;
}<section id="section2">
<div class="calendar_block">
<div class="calendar">
<div id="monthAndYear"></div>
<div class="daysOfWeek">
<div>ПН</div>
<div>ВТ</div>
<div>СР</div>
<div>ЧТ</div>
<div>ПТ</div>
<div>СБ</div>
<div>ВС</div>
</div>
<div id="calendar-body"></div>
</div>
</div>
</section>【问题讨论】：
标签： javascript html calendar htmlcollection