Skip to content Skip to sidebar Skip to footer

JavaScript Display Expiry Date Upon User Input Of Start/end Date

never programmed in JavaScript before, so I ask your assistance to display the expiry date when user chooses start and end date from the calendar. After selecting the end date from

Solution 1:

I think you need to look at datejs.

http://www.datejs.com/

Library which extends Javascript date functionality.

Allows you do stuff like:-

// Add 2 months to Today
Date.today().add(2).months();

Which pretty much covers your requirement.


Solution 2:

JavaScript contains a native Date object, you can add months to it as follows...

var endDate = document.getElementById('enddate').value;
var date = new Date(endDate);
date.setMonth(date.getMonth() + 2); // Yes it will calculate going over a year etc
prevExpiryDate = date.getFullYear() + "/" + 
                 (date.getMonth() + 1) + "/" + // Months are 0 for January etc.
                 date.getDate();

Note

  • The format you are inputting the value to the Date object is important you will want to validate this first.
  • When we are creating the expiry date the value will not be prepended with zeros 2012/12/09, it will be 2012/12/9

Or you can use a library as suggested

EDIT updated code to make it easier to add into OP's code

Alternative approaches, use an event handler, I can see in your code you are using jQuery, if you are including it make the most of it...

$("#enddate").change(function() {
  var endDate = $(this).val();

  // Calculate expiry date
  var date = new Date(endDate);
  date.setMonth(date.getMonth() + 2);

  // Get date parts
  var yyyy = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();

  $("#expirydate").val(yyyy + "/" + m + "/" + d);
});

This needs to be run sometime after document ready, in your code line 441, and it will set the enddate field to update the expiry date field every time it is changed. If you are changing it programmatically you may need to call the change handler manually

// Insert value programmatically
$("#enddate").val(newValue).change();

Otherwise you need a way of passing through an initial value to the displayCalendar function, I have no details of how this function works so I cannot best advise how this might be done.

EDIT The function is part of DHTMLGoodies JS Calendar from 2006 which is calling onchange but doesn't play nice with jQuery so what you will need to do, is do it using the basic onchange property of the element which replaces the jQuery code above...

document.getElementById("enddate").onchange = function() {
  var endDate = this.value;

  // Calculate expiry date
  var date = new Date(endDate);
  date.setMonth(date.getMonth() + 2);

  // Get date parts
  var yyyy = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();

  document.getElementById("expirydate").value = yyyy + "/" + m + "/" + d;
}

Solution 3:

Since you want to add 2 months to your current date,

var d = new Date(year, month, day);
d.setMonth(d.getMonth() + 2);

Post a Comment for "JavaScript Display Expiry Date Upon User Input Of Start/end Date"