主页 / 问题 / 890562
Accepted
Чайник
Asked:2020-10-08 22:32:45 +0000 UTC2020-10-08 22:32:45 +0000 UTC

java script 日历脚本如何使它更通用

  • 772

我正在尝试从头开始修改日历脚本，但要使其尽可能独立，并且月份切换按钮位于函数内部。但是有一个问题，我有一个日期对象，date_js如果它在日历函数内部，则切换月份不起作用，但如果它在外部，则一切正常。我不知道把它放在哪里=）。

var date_js = new Date();

calendar(document.getElementById('calendar'));//end calendar

function calendar(div, settings){

    //объект с настройками календаря/////////
    var set  = {
        container: div,
        currentMonth: date_js.getMonth(),//выбранный месяц
        currentYear: date_js.getFullYear()//выбранный год
    }////////////end set

    //кнопка смены месяца плюс
    var next = document.createElement('div');
        next.setAttribute('id', 'next');
        set.container.appendChild(next);
        next.onclick = function(){
            date_js.setMonth(date_js.getMonth() + 1);

            set.container.innerHTML = '';
            calendar(set.container, { 
                currentMonth: date_js.getMonth(),
                currentYear: date_js.getFullYear()
            } );
            console.log(date_js.getMonth());
        }//end next onclick


    var temp = new Date(set.currentYear, set.currentMonth + 1, 0);//колличество дней в текущем месяце
    var lastDay = temp.getDate();// последний день месяца

    var d = new Date(set.currentYear, set.currentMonth, 1);//начало текущего месяца

    var table = document.createElement('table');

    var tableHeader = '<tr><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс</td></tr>';
        table.innerHTML = tableHeader;//заголовок таблицы с неделями

        //что то делаем с неделями
        var weekday = d.getDay() - 1;
        if(weekday < 0) { 
            weekday = 6; 
        }

        var a = 0;
        //пока месяц равен выбранному месяцу
        while(d.getMonth() == set.currentMonth){

            var i = 0;
            var tr = document.createElement('tr');
            while(i < 7){//пока i меньше чем кол-во дней недели

                if ( d.getMonth()!= set.currentMonth ){
                  break;//убираем даты после последнего числа месяца
                }

                var td = document.createElement('td');
                var attr_date = set.currentYear + '-' + set.currentMonth + '-' + d.getDate();

                if(a == 0){
                    if(i < weekday){
                        //забиваем пустые значения внвчале таблицы
                        td.innerText = '';
                    }else{
                        //заполняем числами первый ряд
                        td.innerText = d.getDate();
                        td.setAttribute('date', attr_date);

                        d.setDate(d.getDate() + 1);
                    }
                }else{
                        //заполняем все остальные ряды
                        td.innerText = d.getDate();
                        td.setAttribute('date', attr_date);

                        d.setDate(d.getDate() + 1);

                }//END ELSE
                    tr.appendChild(td);
                    i++;

            }//end while
            table.appendChild(tr);

            a++;
        }//end while

        div.appendChild(table);

}//end calendar function
javascript

1 个回答

  1. Best Answer

    class Calendar {

    constructor() {
        this.date_js = new Date();
    }

    render(div, settings){

        
        var set  = {
            container: div,
            currentMonth: this.date_js.getMonth(),//выбранный месяц
            currentYear: this.date_js.getFullYear()//выбранный год
        }

        //кнопка смены месяца плюс
        var next = document.createElement('div');
        next.setAttribute('id', 'next');
        set.container.appendChild(next);
        next.onclick = function(){
            this.date_js.setMonth(this.date_js.getMonth() + 1);

            set.container.innerHTML = '';
            this.render(set.container, { 
                currentMonth: this.date_js.getMonth(),
                currentYear: this.date_js.getFullYear()
            } );
            // console.log(this.date_js.getMonth());
        }.bind(this)//end next onclick


        var temp = new Date(set.currentYear, set.currentMonth + 1, 0);//колличество дней в текущем месяце
        var lastDay = temp.getDate();// последний день месяца

        var d = new Date(set.currentYear, set.currentMonth, 1);//начало текущего месяца

        var table = document.createElement('table');

        var tableHeader = '<tr><td>Пн</td><td>Вт</td><td>Ср</td><td>Чт</td><td>Пт</td><td>Сб</td><td>Вс</td></tr>';
        table.innerHTML = tableHeader;//заголовок таблицы с неделями

        //что то делаем с неделями
        var weekday = d.getDay() - 1;
        if(weekday < 0) { 
            weekday = 6; 
        }

        var a = 0;
        //пока месяц равен выбранному месяцу
        while(d.getMonth() == set.currentMonth){

            var i = 0;
            var tr = document.createElement('tr');
            while(i < 7){//пока i меньше чем кол-во дней недели

                if ( d.getMonth()!= set.currentMonth ){
                  break;//убираем даты после последнего числа месяца
                }

                var td = document.createElement('td');
                var attr_date = set.currentYear + '-' + set.currentMonth + '-' + d.getDate();

                if(a == 0){
                    if(i < weekday){
                        //забиваем пустые значения внвчале таблицы
                        td.innerText = '';
                    }else{
                        //заполняем числами первый ряд
                        td.innerText = d.getDate();
                        td.setAttribute('date', attr_date);

                        d.setDate(d.getDate() + 1);
                    }
                }else{
                        //заполняем все остальные ряды
                        td.innerText = d.getDate();
                        td.setAttribute('date', attr_date);

                        d.setDate(d.getDate() + 1);

                }//END ELSE
                    tr.appendChild(td);
                    i++;

            }//end while
            table.appendChild(tr);

            a++;
        }//end while

        div.appendChild(table);

    }

}

var calendar = new Calendar();
calendar.render(document.getElementById('calendar'));
    #next {
    display: inline-block;
    height: 50px;
    width: 50px;
    background: red;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="calendar"></div>
    
</body>
</html>

    至于我 - 一个不错的选择。如果您愿意，您可以重构代码 - 并使其或多或少具有可读性

    • 1

相关问题