Dates sum are not consistent

Question

I have a problem when summing dates in JavaScript. When I run a function to write the current month and the following 12 months, I can see that it retrieves all the month/year dates correct (I also added the number of days of each month).

But after, on changing the selection of the month, I want to display the number of days of the selected month. When I select Feb2022 it gives me 29 days, when actually it has 28 days (also written in the selection option)

How can JavaScript give me unconsistent values for similar functions?

//const today = new Date();
const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];

function writemonth(x) {
    var text = "";
    var today = new Date();
    var dateObj = new Date(today.getFullYear(), today.getMonth()+x, 0);
    var tdays = dateObj.getDate();
    return tdays;
}

function writemonths() {
    var text = "";
    var today = new Date();
    for (let i = 1; i <= 12; i++) {
        var dateObj = new Date(today.getFullYear(), today.getMonth()+i, 0);
        var monthNumber = dateObj.getMonth();
        var year = dateObj.getFullYear();
        var tdays = dateObj.getDate();
        var monthName = monthNames[monthNumber];
        text += "<option value='"+i+"'>" + monthName + " " + year +" " + tdays +"</option>";
    }
    return text;
}

//Let's start by writing the basic layout elements
document.getElementById("availability-calendar").innerHTML = "<select id='months' onchange='refresh();'><option value='0'>Loading...</option></select><div id='month'>"+writemonth(1)+"</div>";

document.getElementById("months").innerHTML = writemonths();

function refresh() {
    var e = document.getElementById("months").value;
    alert(e);
    document.getElementById("month").innerHTML = writemonth(e);
}

<div id="availability-calendar"></div>

on the line where you have `today.getMonth()+x`... `x` is a string... `8 + "6"` is 86, instead14. — Salman A, Sep 13 '21 at 12:51

Nitheesh · Accepted Answer · 2021-09-13T13:35:50.170

Its the issue with the writemonth function.

Expression var dateObj = new Date(today.getFullYear(), today.getMonth() + x, 0); is making string concatenation at today.getMonth() + x because today.getMonth() is a number and x is a string. On addition this will perform string concatenation. To fix this you have to convert x to number before addition, just by adding a + symbol in fromt of x like

var dateObj = new Date(today.getFullYear(), today.getMonth() + +x, 0);

Working fiddle

//const today = new Date();
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function writemonth(x) {
  var text = "";
  var today = new Date();
  var dateObj = new Date(today.getFullYear(), today.getMonth() + +x, 0);
  var tdays = dateObj.getDate();
  return tdays;
}

function writemonths() {
  var text = "";
  var today = new Date();
  for (let i = 1; i <= 12; i++) {
    var dateObj = new Date(today.getFullYear(), today.getMonth() + i, 0);
    var monthNumber = dateObj.getMonth();
    var year = dateObj.getFullYear();
    var tdays = dateObj.getDate();
    var monthName = monthNames[monthNumber];
    text += "<option value='" + i + "'>" + monthName + " " + year + " " + tdays + "</option>";
  }
  return text;
}

//Let's start by writing the basic layout elements
document.getElementById("availability-calendar").innerHTML = "<select id='months' onchange='refresh();'><option value='0'>Loading...</option></select><div id='month'>" + writemonth(1) + "</div>";

document.getElementById("months").innerHTML = writemonths();

function refresh() {
  var e = document.getElementById("months").value;
  // alert(e);
  console.log(e);
  document.getElementById("month").innerHTML = writemonth(e);
}

<div id="availability-calendar"></div>

Digging a little deeper into your issue

Your function writemonth is recieving parameters as string. Because you have provided the value of each option as a string inside the function writemonths with below statement

text += "<option value='" + i + "'>" + monthName + " " + year + " " + tdays + "</option>"

So inside your writemonth function the value for each option will be recieved as a string. So the expression today.getMonth() + x provides string as the result.

The issue is not just with February option. The year is generated wrong for all options. In case of February option, the writemonth function recieves parameter as "6". So the expression today.getMonth() + x will provide "86" as the result.

Because todays month september returns getMonth() result 8 (As of today 13-September-2021 on which answer was posted). So the expression var dateObj = new Date(today.getFullYear(), today.getMonth() + x, 0); will return a date February 29 2028.

This is because the month value "86" adds 7 years to the year because 86/12 gives quotient than 7 and reminder 2. So all the result generated will be 7 years ahead. For 2028, Febrary has 29 days and all other months days wont varry. Because here only the year is getting incremented by 7, not the month.

Please see the value of date in the below fiddle. A little surprised with the year?

function writemonth(x) {
  var text = "";
  var today = new Date();
  var dateObj = new Date(today.getFullYear(), today.getMonth() + x, 0);
  console.log(dateObj);
  var tdays = dateObj.getDate();
  return tdays;
}

writemonth("6")

+ Symbol is multitasking

Adding a number to a number with + generate a number as the result.

Example

const num1 = 10;
const num2 = 20;
const result = num1 + num2;
console.log(result);
console.log(typeof result);

Adding a string to another string with + will generate a string as the result.

Example

const str1 = "John";
const str2 = "Doe";
const result = str1 + str2;
console.log(result);
console.log(typeof result);

If a number is added to a string with +, then JavaScript provides a string as the response.

In JavaScript, the + operator is used for both numeric addition and string concatenation. When you "add" a number to a string the interpreter converts your number to a string and concatenates both together.

Example

const num1 = 10;
const str1 = "Name";
const result = num1 + str1;
console.log(result);
console.log(typeof result);

Dates sum are not consistent

1 Answers1