How to add months to date ? Knockout js

Question

I am working on some calculation what i get is no of months, so i need to add to the startdate and display end date dynamically upon added months.

My effort so far :

View Model:

function calculation() {
var self = this;
self.months= ko.observable("");
self.StartDate = ko.observable("");  // On my get i get startdate like **2014-06-24**
         self.EndDate = ko.computed(function () {
            return  self.StartDate() + ?? // i have no clue how to add 
        });

My cshtml code:

  <input type="text" data-bind="value:$data.StartDate" />
  <input type="text" data-bind="value:$data.EndDate" />

EDIT : Fallowing suggestions i tried like this but formatting is not up to mark sadly

 self.EndDate = ko.computed(function () {
            var date = new Date(self.StartDate());
            date.setMonth(date.getMonth() + 8); // tried static 

            return date.toLocaleDateString() ;

        });

I am getting something like 24 February 2015 but i expect to be 2015-02-24 as i passed date in same format

Any suggestions are appreciated

Answer 1

You will have to take in to account the various edge cases that come with dates. For example, the 31st October + 1 month is obviously not the 31st November. And then you have to take in to account that the number of days in February varies depending on whether or not it is a leap year.

Look at the answer from Jazaret in this question to figure out exactly what the date is in x months from now:

How to add months to a date in JavaScript?

Then you can add this to your code:

self.EndDate = ko.computed(function () {
    var date = new Date(self.StartDate());
    return  date.addMonths(5); // add however months you want
});

Answer 2

Adding months (like adding one month to January 31st) can overflow the days field and cause the month to increment (in this case you get a date in March). If you want to add months and then overflow the date then .setMonth(base_date.getMonth()+monthsToAdd) works but that's rarely what people think of when they talk about incrementing months.

I use this to add months to a date when I don't want to overflow the month:

function addMonthsNoOverflow(dateParam, intParam) {
    var sum = new Date(new Date(dateParam.getTime()).setMonth(dateParam.getMonth() + intParam);
    if (sum.getDate() < dateParam.getDate()) {  sum.setDate(0);  }
    return(sum);
}

Notes: It handles cases where 29, 30 or 31 turned into 1, 2, or 3 by eliminating the overflow Day of Month is NOT zero-indexed so .setDate(0) is last day of prior month.

http://jsfiddle.net/zjdj3zxz/1/

Answer 3

Here's a fairly basic example of adding months to a date:

JSFiddle

Fiddle Code:

var ViewModel = function () {
    var self = this;

    self.StartDate = ko.observable(new Date("2014-06-24"));
    self.EndDate = ko.computed(function () {
        var myDate = new Date(self.StartDate());
        myDate.setMonth(myDate.getMonth() + 5)
        return myDate;
    });
};

$(function () {
    var vm = new ViewModel();
    ko.applyBindings(vm);
});

As @AndrewC states in his post, this doesn't cover edge cases and you will have to account for months with different numbers of days in them and handle them according to your requirements.

Answer 4

EDIT: Please include the Moment.js library in your project. This way the date calculation and formatting will be very easy. Just take a look at the examples in the docs.

So, I believe that is what you want:

http://jsfiddle.net/

var ViewModel = function(date, noOfMonths) {
    this.calculation = ko.computed(function(){
    var m = moment(date);
    return m.add('months',noOfMonths).format('YYYY-MM-DD');
    },this);
};

ko.applyBindings(new ViewModel(new Date('7/31/2014 17:15:00'), 4));