How i can set a Date field to be equal to another Date + Int value which represents value in months

Question

I am working on an asp.net mvc-4 web application . and i have three fields inside my view:-

-Live Date (populated with jQuery DatePicker) -End Date -Length In Months

<input Value="31/05/2016" class="datepicker" data-val="true" data-val-date="The field Live Date must be a date." id="LiveDate" name="LiveDate" type="text" value="31/05/2016 00:00:00" /> 

<input Value="31/10/2016" class="datepicker" data-val="true" data-val-date="The field End Date must be a date." disabled="disabled" id="EndDate" name="EndDate" type="text" value="31/10/2016 00:00:00" />  

<input class="text-box single-line" data-val="true" data-val-number="The field Contract Length (In Months) must be a number." data-val-required="The Contract Length (In Months) field is required." id="ContractLength" name="ContractLength" type="number" value="5" />

now i want using jQuery to perform the following:-

End Date to be equal to Live Date + Length In months.

so if a user select the date to be let say 1/1/2000 and length in month to be 3 . then the End date should be equal to 1/4/2000.. so in other word i want the end date to change if the user chnage the live date and/or length in month ... so can anyone adivce ?

EDIT:-

currently my date format for live date is dateFormat: "dd/mm/yy"

now i tried the following jquery :-

 $("#LiveDate, #ContractLength").change(function () {
            var st = new Date($("#LiveDate").val());
            var month = $("#ContractLength").val();
            $("#EndDate").val(st.getDate() + '/'+(new Date(st.setMonth(st.getMonth() + month)).getMonth() + 1) + '/' + st.getFullYear());
        });

but currently if i have my livedate=31/05/2016 and my contract length = 4 , then the end date will be 5/5/2023 !!! not sure why ?

@NelsonTeixeira maybe in the future i can look into this... but and my current stage i am trying to get this work ,, using standard jQuery — John John, May 16 '16 at 23:42
ok... but believe me, after many hours wasted with the terrible js Date class, I'll tell you: the sooner you make the move to moment.js, the better. It's really straightforward to use. — Nelson Teixeira, May 16 '16 at 23:45
@NelsonTeixeira as i mentioned using new library is not a chose for my at this stage.. thanks — John John, May 16 '16 at 23:55

DinoMyte · Answer 1 · 2016-05-17T00:12:44.890

2

You may try this :

$("#start, #month").change(function()
{
  var st = new Date($("#start").val());
  var month = $("#month").val();
  $("#end").val((new Date(st.setMonth(st.getMonth() + month)).getMonth() + 1) + '/' + st.getDate() + '/' +  st.getFullYear());  
}).change(); // optional

Example : https://jsfiddle.net/DinoMyte/ez8cgsx7/2/

or by defining a user defined jquery function :

$.fn.addMonths = function()
{ 
  var st = new Date($("#start").val());
  var month = $("#month").val();
  $("#end").val((new Date(st.setMonth(st.getMonth() + month)).getMonth() + 1) + '/' + st.getDate() + '/' +  st.getFullYear());  
};

$("#start,#month").change(function()
{ 
 $("#end").addMonths(month);
}).change();

Example : https://jsfiddle.net/DinoMyte/ez8cgsx7/3/

edited May 17 '16 at 00:12

answered May 16 '16 at 23:49

DinoMyte

8,737
1
19
26

thanks for the reply. but your jsfiddle did not work in my case. also i have two fields LiveDate & Length in month. and i want if any of these fields were changed to chnage the end date accordingly .. thanks – John John May 16 '16 at 23:53
1

Updated solution and fiddle. Try it now. – DinoMyte May 17 '16 at 00:00
seems your approach will partially work in my case,, the function will fire are requested ,, but the problem is that the calculation for the EndDate will be wrong,, can you check my edit to see my final code ? thanks – John John May 17 '16 at 00:23
can you please check my edit , and advice accordingly if possible? – John John May 17 '16 at 00:34

Erick · Answer 2 · 2016-05-16T23:51:05.237

1

You could use the following:

Date.prototype.addMonths = function(months) {
  var dat = new Date(this.valueOf());
  dat.setMonth(dat.getMonth() + months);
  return dat;
}

And then call it like so:

myDate = myDate.addMonths(lengthInMonths);

Here's a JSBin with the function implemented:

https://jsbin.com/yozikexiwa/1/edit?js,console

edited May 16 '16 at 23:51

answered May 16 '16 at 23:39

Erick

2,488
6
29
43

1

but how/when to fire this function? i want it to fire when the live date and/or length in month is changed ... – John John May 16 '16 at 23:40
Check out: http://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-help On change events for datepicker. – Erick May 16 '16 at 23:42
and what about chnage the contract length in month field ? – John John May 16 '16 at 23:43
You have not mentioned a contract length at all previously, what do you mean? – Erick May 16 '16 at 23:45
i mean the "Length In Months" field? – John John May 16 '16 at 23:49
i am not searching for the function,, but rather how to force the function to fire incase the liveDate and/or Lengthinmonth are changed..did you get my point ? – John John May 16 '16 at 23:54
The answer by @DinoMyte shows you how to do an `onChange` function, and the link I shared above shows you how to do `onSelect` functions. Any of that can do what you want. I would still use the function above because it would increment your code reusability. – Erick May 16 '16 at 23:57

score -1 · Answer 3 · answered May 17 '16 at 00:00

-1

endDateObj.setMonth(startDateObj.getMonth() + monthsToBeAdded);

OR

var startDate = $('.pickupDate').datepicker('getDate');
var endDate = new Date();
endDate.setDate(startDate.getMonth() + monthsToAdd);
$('input').val(endDate);

answered May 17 '16 at 00:00

Sami

3,686
4
17
28

Can you explain please, why negative ? – Sami May 17 '16 at 02:31

How i can set a Date field to be equal to another Date + Int value which represents value in months

3 Answers3