Javascript日历不会显示当前日期+月份

时间:2014-11-02 20:32:53

标签: javascript calendar

我正在使用javascript创建一个日历,我不想在<div id=taken>内显示当前日期,日期名称和月份名称,它位于我的函数Kalender()内但是出于某种原因,如果我执行函数volgende()(下个月)它会更改<div id=taken>中的月份,而不是当前日期和月份,我该如何解决这个问题?

var dayNames = ['Zon', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    //Volledige Dagnamen//
    var dayNamesFull = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'];
    //Volledige Maandnamen//
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'Oktober', 'November', 'December'];
    //Maand lengte van 0 - 11//
    var monthLength = [31,28,31,30,31,30,31,31,30,31,30,31]; 
    //Nieuwe datum//
    var today = new Date();
    //Vandaag//
    var day = today.getDay();
    //vandaag zoekmaand//
    var month = today.getMonth();
    //vandaag//
    var vandaag = today.getDate();
    //volledig jaar//
    var year = today.getFullYear();

//Kalender schrijf functie//    
function Kalender() {
   var buttons = '<button id="vorige" onclick="vorige()">Vorige</button><button id="volgende" onclick="volgende()">Volgende</button>'
   var kalender = "";

document.getElementById('Header').innerHTML = monthNames[month]+" "+year+buttons;
    kalender += '<table id="cal"><div id="taken"></div>';   

        for (var j = 1; j <= monthLength[month]; j++) {
            if (vandaag == j ) {
                kalender +="<td id='tabeldagen' class='dagVandaag'>"+j; 
                }
                else {
                    kalender += "<td id='tabeldagen'>"+j; 
                } 

                    if (j % 7 == 0) {
                kalender += "<tr>";
            }
            kalender += '</td>';
        }

    kalender += '</table>';
    document.getElementById('kalen').innerHTML = kalender;
            document.getElementById('taken').innerHTML += dayNamesFull[day]+" "+vandaag+" "+monthNames[month];

    }
//Leap Year//
    if (month == 1) {
        if (year % 4 == 0) {
            monthLength = 29;
    }

}





//Volgende Maand functie//
function volgende() {
month = month + 1;
    if(month > 11) {
        month = -1;
        month = month + 1;
        year = year + 1;
    } 
        Kalender();
    }
//Vorige maand functie//
function vorige() {
    month = month - 1;
    if(month < 0) {
        month = + 12;
        month = month - 1;
        year = year - 1;
    } 
    Kalender();
}

HTML:

<!DOCTYPE html>
<head>
    <title>Kalender</title>
    <link type="text/css" rel="stylesheet" href="kalender.css"> 

</head>
<body onload="Kalender()">
    <div id="kalender"> 
            <div id="Header">
            </div>
        <div id="kalen">
        </div>
    </div>
    <script type="text/javascript" src="Kalender.js"></script> 
</body>
</html> 

1 个答案:

答案 0 :(得分:1)

问题是您在功能daymonth中更改了volgende()vorige()个变量。尝试为当前日期和月份添加其他变量:

//Vandaag//
var day = today.getDay();
var currentDay = day;
//vandaag zoekmaand//
var month = today.getMonth();
var currentMonth= month;

并在taken元素中使用它们:

        document.getElementById('taken').innerHTML += dayNamesFull[currentDay]+" "+vandaag+" "+monthNames[currentMonth];