@yagyar001

Как сменить месяц в календаре по клику на кнопку?

Всем привет. Изучаю javascript. Тренируюсь с календарем. Но чет не получается. Точнее не могу придумать как реализовать смену месяца и соответственно дней. Если по событию клика по buttonPrev отниму единицу от monthNow, то теоретически должен смениться месяц и соответственно числа. Но я понимаю, что циклом ранее уже все вывел. Но блин как реализовать все это не могу додуматься(( Подтолкните на путь истинный.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Моя первая программа</title>
	<link rel="stylesheet" href="style.css">
	
</head>
<body>

<div class="cal">
	
</div>

<script src="js.js"></script>
</body>

</html>


.cal__days_day {
	display: inline-flex;
	border: 2px solid black;
	border-radius: 6px;
	margin: 3px;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
}
.cal__days {
	text-align: center;
}
.today {
	background-color: green;
}

button {
	width: 50px;
	height: 50px;
	margin: 30px;
}

.cal {
	text-align: center;
}

let dateNow =  new Date();
let monthNow = dateNow.getMonth(); // сегодняшний месяц
let daysMonthNow = new Date(2020, monthNow, 1);  // 1 число сегодняшнего месяца
let daysMonthPrev = new Date(2020, monthNow + 1, 1);  // 1 число следующего месяца
let daysInMonthNow = Math.round((daysMonthPrev- daysMonthNow) / 1000 / 3600 / 24);  // Количество дней в текущем месяце

let months = ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'];

let cal = document.querySelector('.cal');
let ul = document.createElement('ul');
ul.classList.add('cal__days');
cal.appendChild(ul);  // вставил тег ul

for (var i = 1; i <= daysInMonthNow; i++) {  // Вывожу числа текущего месяца списком
	let li = document.createElement('li');
	li.classList.add('cal__days_day');
	li.innerHTML = i;
	ul.appendChild(li);
	if (dateNow.getDate() == i) {   // добавил стиль текущему дню
		li.classList.add('today');
	}
};

let buttonNext = document.createElement('button');
buttonNext.innerHTML = '►';
cal.prepend(buttonNext);  // создал кнопку "вперед"


let buttonPrev = document.createElement('button');
buttonPrev.innerHTML = '◄';
buttonPrev.addEventListener('click', function(){
	monthNow--;
})
cal.prepend(buttonPrev);  // // создал кнопку "назад"

let month = document.createElement('p');
month.innerHTML = months[monthNow];
cal.prepend(month);

let year = document.createElement('p');
year.innerHTML = dateNow.getFullYear();
cal.prepend(year);


https://codepen.io/yagyar001/pen/RwrYwRZ
  • Вопрос задан
  • 218 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Если месяц сменился, то выведенные дни наверное нужно обновить.
Этот ваш for оберните в функцию, и при смене месяца вызывайте заново, передавая в нее новый месяц.


оставил там пару комментариев
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы