Incrementing date doesnt work as expected in javascript

Question

Incrementing the date in javascript does not work as expected.

The functionality worked well before but I do not know why it is not working now.

Actual Result:
Tue Apr 30
Wed May 01
Sat Jun 01
Wed Jul 03
Sat Aug 03
Wed Sep 04
Sun Oct 06

Expected:
Tue Apr 30
Wed May 01
Thu May 02
Fri May 03
Sat May 04
Sun May 05
Mon May 06

var dt = new Date();
var nextDay = new Date(dt);
nextDay.setDate(dt.getDate() + 1);

document.getElementById("datetime1").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 2);
document.getElementById("datetime2").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 3);
document.getElementById("datetime3").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 4);
document.getElementById("datetime4").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 5);
document.getElementById("datetime5").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 6);
document.getElementById("datetime6").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 7);
document.getElementById("datetime7").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 8);

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

<pre id="datetime1"></pre>
<pre id="datetime2"></pre>
<pre id="datetime3"></pre>
<pre id="datetime4"></pre>
<pre id="datetime5"></pre>
<pre id="datetime6"></pre>
<pre id="datetime7"></pre>

You should use for-loop in this case. A small typo could break your code. — Maheer Ali
I made you a snippet so you have a minimal reproducible example — mplungjan
Side note: var nextDay = new Date(dt); is not a reliable way to clone a date. It works/worked on some JavaScript engines and not others. To reliably clone a date, use the milliseconds-since-The-Epoch value from getTime (or a unary +): var nextDay = new Date(dt.getTime()); or var nextDay = new Date(+dt); — T.J. Crowder
maybe using moment.js can be usefull to format date if your source dates can have different format — AlainIb

T.J. Crowder T.J. Crowder · Accepted Answer · 2019-04-29T09:27:30

The basic problem is that you update nextDay based on dt:

nextDay.setDate(dt.getDate() + 1);

which potentially changes its month, and then repeatedly do it again:

nextDay.setDate(dt.getDate() + 2);

So:

nextDay.setDate(dt.getDate() + 1);: Setting day 30 on April 29th makes it April 30th
nextDay.setDate(dt.getDate() + 2);: Setting day 31 on April 30th makes it May 1st (there are only 30 days in April)
nextDay.setDate(dt.getDate() + 3);: Setting day 32 on May 1st makes it June 1st (May only has 31 days)
nextDay.setDate(dt.getDate() + 4);: Setting day 33 on June 1st makes it July 3rd (June only has 30 days)

...and so on. Mixing the dt.getDate() with nextDay.setDate is what's tripping you up, because dt stays in April but nextDay moves to the next month.

Instead, just update the same date instance, moving forward by 1, and use a loop rather than repeating yourself:

var dt = new Date();
var nextDay = new Date(+dt);

for (var n = 1; n <= 7; ++n) {
    nextDay.setDate(nextDay.getDate() + 1);
    document.getElementById("datetime" + n).innerHTML = ("0" + nextDay).substring(1, 12);
}

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

<pre id="datetime1"></pre>
<pre id="datetime2"></pre>
<pre id="datetime3"></pre>
<pre id="datetime4"></pre>
<pre id="datetime5"></pre>
<pre id="datetime6"></pre>
<pre id="datetime7"></pre>

Side note:

var nextDay = new Date(dt);

is not a reliable way to clone a date. It works/worked on some JavaScript engines and *not others. To reliably clone a date, use the milliseconds-since-The-Epoch value from getTime (or a unary +):

var nextDay = new Date(dt.getTime());
// or
var nextDay = new Date(+dt);

I've done that above.

Side note 2:

("0" + nextDay).substring(1, 12); is an odd way to convert a date to a string. I'd probably use String(nextDay).substring(0, 11) instead, or a date formatting library.

Incrementing date doesnt work as expected in javascript

2 Answers