Adding days to given date in jQuery

Question

I have a form with three fields, "start_date", "days", "end_date". I would like to get the end date by adding days to the start date.

My jQuery code is:

$("#days").change(function(){
  var start_date = new Date($("#start_date").attr('value'));
  var days = parseInt($("#days").attr('value'))-1;
  var end_date = new Date(start_date);
  end_date.setDate(start_date.getDate() + days);                            
  $("#end_date").val(end_date.getFullYear() + '-' + ("0" + (end_date.getMonth() + 1)).slice(-2) + '-' + ("0" + end_date.getDate()).slice(-2));
});

In the "end_date" field I get "NaN-aN-aN".

What am I doing wrong?

Your question says you get NAN in `end_date`, I am asking what you get in `start_date` (which if its also NAN, its because the value of `#start_date` does not represent a valid date format) — , May 25 '14 at 10:15
The start_date is completed by the user. Its format is YYYY-MM-DD. — Cosmin, May 25 '14 at 10:17
`start_date` is not completed by the user, its a javascript Date() object that is initialised based user data. Please add `console.log(start_date);` and see what its value is. — , May 25 '14 at 10:28
OK, that means the value of the `input` with `id = start_date` cannot be converted to a valid date or your referring to an `input` which does not exist. Can you add the html to your post. — , May 25 '14 at 10:43
https://stackoverflow.com/questions/563406/add-days-to-javascript-date — Rajat, Jun 18 '21 at 05:48

William George · Accepted Answer · 2015-05-10T21:20:51.210

NaN stands for Not a Number - This means that the users input is invalid.

You could check to see if the input is valid by using if(!isNaN(date.getTime())){

Some code to get you started:

;(function($, window, document, undefined){
    $("#days").on("change", function(){
       var date = new Date($("#start_date").val()),
           days = parseInt($("#days").val(), 10);

        if(!isNaN(date.getTime())){
            date.setDate(date.getDate() + days);

            $("#end_date").val(date.toInputFormat());
        } else {
            alert("Invalid Date");  
        }
    });


    //From: http://stackoverflow.com/questions/3066586/get-string-in-yyyymmdd-format-from-js-date-object
    Date.prototype.toInputFormat = function() {
       var yyyy = this.getFullYear().toString();
       var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
       var dd  = this.getDate().toString();
       return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
    };
})(jQuery, this, document);

http://jsfiddle.net/MCzJ6/1

Hope this helps.

W

Hi WG, I found it logical, but I dont know why it gives me Invalid Date, because when I pass the string date to the new Date(), it doesnt create a new one. is there any solution to this problem? — krachleur, Oct 05 '17 at 10:31
How to supply or add days when you have date format something like Thu 15/02/2018 add 3 Days in this value and get result Sun 18/2/2018 — Group Of Oceninfo, Feb 15 '18 at 02:30

Adding days to given date in jQuery

1 Answers1

Linked