javascript add days to a given date

Question

I have the following javascript function that is supposed to add a week to a form date and store it in the form for next time the user clicks the link

function changeDate() { var start = document.getElementById('start_date').value; var d = 7; var myDate=new Date(start); myDate.setDate(myDate.getDate()+parseInt(d)); document.getElementById('start_date').value = (myDate.getFullYear()) + '-' + (myDate.getMonth()+1) + '-' + (myDate.getDate()); }

My form looks something like this

<?php $start_date = "2014-09-20"; ?> <form name="myForm" method="post"> <input type="text" name="start_date" id="start_date" value="<?php echo $start_date?>"/> <a href="#" onclick="changeDate();">Next</a> </form>

This script works fine incrementing a week each time the user clicks the hyperlink "Next", the problem happens with the month boundary. When the date is "2014-09-27" the script calculates the next date correctly and displays "2014-10-04". The problem happens on the next click, once the month have changed the next time the script fails. I don't understand why, I tried alerting the start_date and it is correct "2014-10-04", but once execute new Date command, it returns an invalid date.

The strange thing is that it doesn't fail on the month boundary (this actually gets calculated correctly) but it fails the next time. I thought it might be related to the current month but it doesn't matter, if I start with start_date set to "2014-11-03" it will continue adding correctly until I display the date "2014-12-01", but will fail the next time.

Any help is greatly appreciated

dusky · Accepted Answer · 2014-09-29 11:24:41Z

Your problem is that the browser expects 2014-09-27 instend of 2014-9-27.

This will fix it:

function padNumber(num, length) { var str = num + ""; while (str.length < length) { str = "0" + str; } return str; } function changeDate() { var start = document.getElementById('start_date').value; var d = 7; var myDate=new Date(start); myDate.setDate(myDate.getDate()+parseInt(d)); document.getElementById('start_date').value = (myDate.getFullYear()) + '-' + padNumber(myDate.getMonth()+1, 2) + '-' + padNumber(myDate.getDate(), 2); }

A better way to add days to a date would be:

function addDays(date, days) { return new Date( date.getFullYear(), date.getMonth(), date.getDate() + days, date.getHours(), date.getMinutes(), date.getSeconds() % 60, date.getMilliseconds()); }

An even better way for time manipulations is http://momentjs.com/.

I just ran a test with new Date("2014-9-27"). Chrome and Node accept it, Firefox and IE10 don't.

Amadan · Accepted Answer · 2014-09-29 07:42:43Z

A date plus a week, simplified, is:

var oneWeekFromMyDate = new Date(myDate.getTime() + 7 * 24 * 60 * 60 * 1000);

It doesn't work with leap seconds, daylight saving switches and other calendar disturbances, though.

EDIT: As for your solution, it actually runs without problems on my computer:

function changeDate() { var start = document.getElementById('start_date').value; var d = 7; var myDate=new Date(start); myDate.setDate(myDate.getDate()+parseInt(d)); document.getElementById('start_date').value = (myDate.getFullYear()) + '-' + (myDate.getMonth()+1) + '-' + (myDate.getDate()); }

<form name="myForm" method="post"> <input type="text" name="start_date" id="start_date" value="2014-11-03"/> <a href="#" onclick="changeDate();">Next</a> </form>

If it fails for you, can you specify what "fail" means? It changes to a random other date, it breaks and shows an error message in console, it explodes a cow in your back yard?

I tried using milliseconds like your solution and getTime instead of getDate, still same problem, succeeds until the month changes and fails
By fails I mean the var myDate returns "Invalid Date" if I alert(myDate) and consequently trying to get Year or month or day failed with NaN
If you run your code snipped it will succeed as long as the month is November, it will give the proper date of 1st of december, then it will start giving invalid date, just go through the month until it changes then the "next" time it will give Invalid date
Could it be a browser compatibility thing? The code above runs perfectly on my Chrome, I never get "Invalid date". I advanced a full year with the above code.
Oh it seems like it, when I tried it on chrome it works perfectly like you say. I was using Safari to test. Thanks for the tip, as it was so simple I didn't realize it could be a browser problem

Collectives™ on Stack Overflow

javascript add days to a given date

2 Answers 2

1 Comment

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Related