Calculating the gap between the previous end date and the next start date in javascript

Question

Edit: I tried some of the suggestions at the answer below, but I still don't get the appropriate results. Any further help would be appreciated.

I have implemented a form in HTML that takes 2 dates as inputs and they are appended into two arrays. Then I calculate the difference between the 2 dates in months.

a) The form asks the user about his/her five year history and therefore the user should be able to input dates until he/she riches five years(60 months). For this issue, I tried the function below:

if (typeof startArray[index] !== 'null' && endArray[index] !== null) {
var result = difference_between(dateFrom, dateTo);
document.getElementById("txtResult").value = result
if(result <= 60) {
document.getElementById('datepicker1').reset();
document.getElementById('datepicker2').reset();
document.getElementById('txtResult').reset();
}
else{
alert("Go to the next section");
document.getElementById('btnSave').disable = true;
}

b) The form should be able to calculate the gap between the end date and the next start date and there should not be a gap of more than two months. For example, the form should be able to compare the date I ended school with the date I started uni and if it's bigger than 2 months, then I should thow an error message. Here is my function:

function GetDifference() {
var dateFrom = new Date(document.getElementById("datepicker1").value);
var dateTo = new Date(document.getElementById("datepicker2").value);
document.getElementById("txtResult").value = difference_between(dateFrom, dateTo);

//Is there a gap of more than 2 months?
if (endDate.length && (difference_between(endDate[endDate.length - 1], dateFrom)) > 2) {
    window.alert("There should not be a gap of more than two months in this section.");
}
}

here is the JSFIDDLE: http://jsfiddle.net/stelios13/KsuxV/111/

Thank you.

Answer 1

startDate.splice(0,1) deletes the first element in startDate, I have a feeling that's not what you want. I'd do the check like this:

function GetDifference() {
    var dateFrom = new Date(document.getElementById("datepicker1").value);
    var dateTo = new Date(document.getElementById("datepicker2").value);
    document.getElementById("txtResult").value = difference_between(dateFrom, dateTo);

    // Right now the things in endDate are strings so this won't work, but see below
    if(endDate.length && (difference_between(endDate[endDate.length - 1], dateFrom)) > 2){
        window.alert("There should not be a gap of more than two months in this section. Plsease fill in your details appropriately");
        document.getElementById("btnSave").disabled = true; 
    }
}

…First I make sure that endDate isn't empty, then I get the last date in endDate and compare it to dateFrom. Is that what you're looking for?

You can do something similar to check for a five-year range: First make sure that startDate and endDate are not empty, then compare the first date in startDate (startDate[0]) with the last date in endDate (endDate[endDate.length - 1]).

---

By the way, in JavaScript dates can convert to numbers (as the number of milliseconds from an arbitrary start point, January 1, 1970):

// The unary `+` operator converts its operand to a number:
console.log(+new Date()); // Just now, logged 1377880989982

This is great for comparing them:

// How many milliseconds in a month?
var month = 1000 * 60 * 60 * 24 * 365.25 / 12;
// Subtraction also converts its operands to numbers:
console.log(
    Math.round((new Date('2013-06-01') - new Date('2013-01-01')) / month)
); // Logs 4.96

So, there are about five months between January 1st and June 1st. If, in your case, you want to be a little more human (and make sure the month number is no more than two apart), then the way you're comparing them is totally fine.

---

One other little suggestion: If you're going to be comparing these dates later, you might want to store Dates in the arrays, not strings. And, .push() is a more common way to add something to an array than assigning to arr[arr.length]:

// I would change the beginning of insert() to something like this:
function insert() {
    var newStartDate = new Date(document.getElementById('datepicker1').value);
    var newEndDate = new Date(document.getElementById('datepicker2').value);
    startDate.push(newStartDate);
    endDate.push(newEndDate);

    // …
}

Answer 2

Maybe moment.js can be useful for you. It's a js library for working with dates, and it also have a diff function.