1

我正在制作一个日历，用户可以在其中选择不同的日期。问题是该月的最后一天不可用。我在控制台中看到数组的最后一个索引是未定义的，但是当我记录 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>

4

1 回答 1

0

使用一些 jquery 修复了这个问题

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')
// 		})
//
// 	});
// }
$(document).ready(function() {

  $.each($('.span'), function() {

    $(this).click(function() {
      $(this).addClass('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;
}
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <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>
</body>

</html>

于 2019-05-17T21:21:04.890 回答