@Romchikyoyo

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

Сейчас даты не заменяются, а дописываются к текущему месяцу. Как сделать так, чтобы при выборе любого месяца в select'е даты менялись?

Жду в ответе не прямого решения с кодом, а совета, на что именно стоит обратить внимание, чтобы я сам потом дошёл до решения.

демка — https://codepen.io/khlebnikovroman/pen/dxgeRN?edit...

const createCalendar = (id, year, month) => {
    let elem = document.getElementById(id);
    let mon = month - 1;
    let d = new Date(year, mon);
    let table = '<div class="table"><div>пн</div><div>вт</div><div>ср</div><div>чт</div><div>пт</div><div>сб</div><div>вс</div>';
    
    // Получаем номер дня недели, от 0(пн) до 6(вс)
    const getDay = () => { 
		let day = d.getDay();
		if (day === 0) day = 7;
		return day;
    };
    getDay();

    // Заполнить первый ряд пустыми ячейками от пн
    const fillFirstRow = () => {
        for (var i = 1; i < getDay(d); i++) {
            table += '<div></div>';
        }
    };
    fillFirstRow();

    //Ячейки календаря с датами
    const fillTable = () => {
        for (let i = 1; i <= d.getDate(); i++) {
            if (d.getMonth() <= mon) {
                table += '<div class="day" data-id="">' + d.getDate() + '</div>';
                elem.innerHTML = table;
                d.setDate(d.getDate() + 1);
            }
        };
    };
    fillTable();


    
    // Выводим текущий месяц через select
    const getMonth = () => {
        let selectM = document.querySelector('.month');
        for (let i = 0; i < selectM.length; i++) {
            if (selectM[i].value == mon) {
                selectM.value = mon + 1;
            }
        }

        const getIndexDays = (month, year) => {
            return new Date(year, month, 0).getDate();
        };
 
        selectM.addEventListener('change', () => {

            let currentMonth = selectM.selectedIndex + 1;
            for (let i = 1; i < getIndexDays(currentMonth, year) + 1; i++) {
                table += '<div class="day" data-id="">' + i + '</div>';
                elem.innerHTML = table;
                console.log(i);
            }
        })
    };
    getMonth();

}

createCalendar('calendar', 2019, 8);
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 1
@MaximBredikhin
I am still learning.
Возможно, стоит добавить какой-то метод clear(), который будет очищать текущий месяц (дни на календаре) и метод render(), который будет отрисовывать новый и запускать их при каждой смене месяца/года и т.п.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Александрия Москва
от 200 000 до 250 000 руб.
Foodtronics Москва
от 100 000 до 200 000 руб.
Алгоритмика Москва
от 120 000 до 200 000 руб.
21 авг. 2019, в 18:58
100 руб./за проект
21 авг. 2019, в 18:32
5000 руб./за проект
21 авг. 2019, в 18:21
1000 руб./за проект