@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);
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
@MaximBredikhin
Возможно, стоит добавить какой-то метод clear(), который будет очищать текущий месяц (дни на календаре) и метод render(), который будет отрисовывать новый и запускать их при каждой смене месяца/года и т.п.
Ответ написан
Ваш ответ на вопрос

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

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