JavaScript how to fix getting days in a month using getDate()?

Question

I'm creating a calendar that automatically displays whatever month you want and displays it in a table. For some reason though when I use getDate() in my JavaScript section to get how many days are in the month it's not correct. Here's an examples.

For the code to get the days in the month I'm doing this.

var DaysInMonth = new Date(Year, Month, 0).getDate();

For January 2017, it says there are 31 days in the month. Which is correct. Now if we click the button again it will go to February, but it says there are 31 days in the month. Let's try March. Now it's saying March has 28 days. And if we click it again it will say April has 31 days.

As you can see It get's very weird. I'm not really sure what I'm doing wrong/where it's messing up. Here's a link to all of the code.

http://www.w3schools.com/code/tryit.asp?filename=FBNGPFXV841A

var Month = 0;
var Month1 = -1;
var Year = 2017;

function NextMonth() {
  Month = Month + 1;
  Month1 = Month1 + 1;

  if (Month == 1) {
    document.getElementById("MonthTitle").innerHTML = "January " + Year;
  } else if (Month == 2) {
    document.getElementById("MonthTitle").innerHTML = "February " + Year;
  } else if (Month == 3) {
    document.getElementById("MonthTitle").innerHTML = "March " + Year;
  } else if (Month == 4) {
    document.getElementById("MonthTitle").innerHTML = "April " + Year;
  } else if (Month == 5) {
    document.getElementById("MonthTitle").innerHTML = "May " + Year;
  } else if (Month == 6) {
    document.getElementById("MonthTitle").innerHTML = "June " + Year;
  } else if (Month == 7) {
    document.getElementById("MonthTitle").innerHTML = "July " + Year;
  } else if (Month == 8) {
    document.getElementById("MonthTitle").innerHTML = "August " + Year;
  } else if (Month == 9) {
    document.getElementById("MonthTitle").innerHTML = "September " + Year;
  } else if (Month == 10) {
    document.getElementById("MonthTitle").innerHTML = "October " + Year;
  } else if (Month == 11) {
    document.getElementById("MonthTitle").innerHTML = "November " + Year;
  } else if (Month == 12) {
    document.getElementById("MonthTitle").innerHTML = "December " + Year;
  } else if (Month == 13) {
    Month = 1;
    Year = Year + 1;
    document.getElementById("MonthTitle").innerHTML = "January " + Year;
  }

  var RowNum = 0;
  var RowID = 10;
  var TotalNum = 0;
  while (TotalNum < 35) {
    TotalNum = TotalNum + 1;
    RowNum = RowNum + 1;
    if (RowNum == 8) {
      RowNum = 1;
      RowID = RowID + 10;
    }
    document.getElementById(RowID + RowNum).innerHTML = "&nbsp;";
  }

  var ID = 11;
  var Current = 1;
  var WeekNum = 0;
  var DaysInMonth = new Date(Year, Month1, 0).getDate();
  var WeekDay = new Date(Year, Month1, Current).getDay();
  document.getElementById("MonthTitle").innerHTML = DaysInMonth + " " + WeekDay + " " + Month1;
  WeekNum = WeekDay;

  document.getElementById(ID + WeekDay).innerHTML = Current;

  while (Current < DaysInMonth) {

    Current = Current + 1;
    WeekNum = WeekNum + 1;

    if (WeekNum == 7) {
      WeekNum = 0;
      ID = ID + 10;
    }

    var WeekDay1 = new Date(Year, Month1, Current).getDay();

    document.getElementById(ID + WeekDay1).innerHTML = Current;
  }
}

function PrevMonth() {
  Month = Month - 1;
}

td {
  vertical-align: top;
  width: 100px;
  height: 80px;
}
th {
  width: 100px;
  height: 25px;
}
#ButtonAlign {
  text-align: center;
  padding-top: 10px;
}

<table border="1px solid black" style="border-collapse:collapse;width:80%" align="center">
  <caption id="MonthTitle" style="font-size: 50px;padding-bottom: 10px">January 2017</caption>
  <tr>
    <th>Sunday</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
  </tr>
  <tr>
    <td id="11">1</td>
    <td id="12">2</td>
    <td id="13">3</td>
    <td id="14">4</td>
    <td id="15">5</td>
    <td id="16">6</td>
    <td id="17">7</td>
  </tr>
  <tr>
    <td id="21">8</td>
    <td id="22">9</td>
    <td id="23">10</td>
    <td id="24">11</td>
    <td id="25">12</td>
    <td id="26">13</td>
    <td id="27">14</td>
  </tr>
  <tr>
    <td id="31">15</td>
    <td id="32">16</td>
    <td id="33">17</td>
    <td id="34">18</td>
    <td id="35">19</td>
    <td id="36">20</td>
    <td id="37">21</td>
  </tr>
  <tr>
    <td id="41">22</td>
    <td id="42">23</td>
    <td id="43">24</td>
    <td id="44">25</td>
    <td id="45">26</td>
    <td id="46">27</td>
    <td id="47">28</td>
  </tr>
  <tr>
    <td id="51">29</td>
    <td id="52">30</td>
    <td id="53">31</td>
    <td id="54">&nbsp;</td>
    <td id="55">&nbsp;</td>
    <td id="56">&nbsp;</td>
    <td id="57">&nbsp;</td>
  </tr>
</table>
<div id="ButtonAlign">
  <button type="button" onclick="NextMonth()" style="width: 125px">Next Month</button>
  <button type="button" onclick="PrevMonth()" style="width: 125px">Previous Month</button>
</div>

*Also, when you click the button it will change the month title to 3 numbers. The first one is how many days are in the month. The second is the weekday in which the month starts (Which is 0-6). And the last is which month it is (0-11).

Answer 1

var DaysInMonth = new Date(Year, Month, 0).getDate(); gives you the number of days in the previous month (where months are from 0 to 11). i.e. for February you should call it like var DaysInMonth = new Date(2017, 2, 0).getDate(); .

Based on your results you're calling it for February like var DaysInMonth = new Date(2017, 1, 0).getDate();. So you could fix your code like this

var DaysInMonth = new Date(Year, Month + 1, 0).getDate();

PS: See also What is the best way to determine the number of days in a month with javascript?

Answer 2

In Javascript getMonth() values are from 0-11, it looks like you are coding January as 1.