Set value of input type date bug

Question

I have 2 fields input and output dates. On certain conditions I set the endDate to be 1 year ahead of start date.

<input type='date' id='endDate'>

$("#startDate").change(function(){
    var endDate = new Date($("#startDate").val());
    endDate.setMonth(endDate.getMonth() + 1);
    endDate.setFullYear(endDate.getFullYear() + 1);
    var myDay = ("0" + endDate.getDate()).slice(-2);
    var myMonth = ("0" + endDate.getMonth()).slice(-2);
    $("#endDate").val(endDate.getFullYear() + '-' + myMonth + '-' + myDay);
}

The issue when I set the start date to 2-29-2016 I got the following error:

The specified value "2017-02-29" does not conform to the required format, "yyyy-MM-dd".

I expected the Date() function to take care of it. Apparently, they don't. Is this a bug?

Is their anyway faster than adding a bunch of if statements?

Answer 1

The specified value "2017-02-29" does not conform to the required format, "yyyy-MM-dd".

2017-02-29 is not a valid date. 29th feb of next year (2017) is not possible.

Only leap years have february Month of 29.

Try 2016-02-29 instead.

Is their anyway faster than adding a bunch of if statements?

No need to add bunch of if statements, you can use this answer

function leapYear(year)
{
  return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}

For answering your question, if you set the date explicitly like "2017-02-29" then it will throw an error.

Just make changes in the date object itself and apply that date object to the input by

  $("#endDate").val( endDate.toJSON().slice(0,10) );

Now it should take care of rolling over to next month.

Edit (based on TJ's comment)

Leap years occur every year that is evenly divisible by 4 except ones evenly divisible by 100 (which are not leap years), except ones evenly divisible by 400 (which are leap years).

Answer 2

The real problem here is that you've used the value of getMonth without adding 1 to it. The value from getMonth starts at 0 (January), but month values in your yyyy-MM-dd format start with 1.

So:

var myMonth = ("0" + (endDate.getMonth() + 1)).slice(-2);
// Note -------------^------------------^^^^^

That's how you ended up with an invalid string, 2017-02-29, despite having used the Date object, which will indeed ensure it only gives you valid dates. The Date object contained the date March 29th, not February 29th.

However:

On certain conditions I set the endDate to be 1 year ahead of start date.

Your code doesn't do that. It adds a year and a month, not just a year:

endDate.setMonth(endDate.getMonth() + 1);       // <== Changing month
endDate.setFullYear(endDate.getFullYear() + 1);

If you only want to add a year, remove the first of those two lines. That, combined, with the correction to how you're using getMonth when forming the string, will reliably add a year to the date (with possible month rollover).

So:

$("#startDate").change(function(){
    var endDate = new Date($("#startDate").val());
    endDate.setFullYear(endDate.getFullYear() + 1);
    var myDay = ("0" + endDate.getDate()).slice(-2);
    var myMonth = ("0" + (endDate.getMonth() + 1)).slice(-2);
    $("#endDate").val(endDate.getFullYear() + '-' + myMonth + '-' + myDay);
});