JavaScript日历显示月份和日期

Question

I'm trying to display a calendar where the month and year show at the top, with the days on single line (number line format) below. I want to get the next and previous months after clicking a button.

However, it only works after one click and I cant get the correct amount of days to display for the month.

 var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; var d = new Date(); var label = month[d.getMonth()]; var year = d.getFullYear(); var day = d.getDate(); document.getElementById("mon").innerHTML = label + " " + year; document.getElementById("days").innerHTML = day; //display days var daysInMonths = [31, (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] document.getElementById("prevBtn").addEventListener("click", previousMonth); function previousMonth() { label = month[d.getMonth() - 1]; document.getElementById("mon").innerHTML = label + " " + year; } document.getElementById("nextBtn").addEventListener("click", nextMonth); function nextMonth() { label = month[d.getMonth() + 1]; if (label > 11) { year = d.getFullYear() + 1; } document.getElementById("mon").innerHTML = label + " " + year; } 

 <div class="calendar"> <div class="header"> <span class="left button" id="prevBtn">&lang;</span> <span><h1 id="mon"></h1></span> <span class="right button" id="nextBtn">&rang;</span> </div> <table> <tbody> <tr id="days"></tr> </tbody> </table> </div> 

Answer 1

I've made a few modifications below as per my comment above.

var month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var today = new Date();
var label = month[today.getMonth()];
var mm = today.getMonth(); // keep track of the month
var year = today.getFullYear(); // keep track of the year
var day = today.getDate();
document.getElementById("mon").innerHTML = label + " " + year;
document.getElementById("days").innerHTML = day;

//display days
var daysInMonths = [31, (((year%4==0)&&(year%100!=0))||(year%400==0)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

document.getElementById("prevBtn").addEventListener("click", previousMonth);

function previousMonth() {
    mm -= 1; // decrement the month
    if (mm < 0) { // if we go before January
        mm = 11; // go to December
        year -= 1; // of previous year
    }
    label = month[mm];
    document.getElementById("mon").innerHTML = label + " " + year;
}

document.getElementById("nextBtn").addEventListener("click", nextMonth);
function nextMonth(){
    mm += 1; // increment month
    if (mm > 11) { // if we go after December
        mm = 0; // go to January
        year += 1; // of next year
    }
    document.getElementById("mon").innerHTML = label + " " + year;
}