Calculate difference between the date and time entered?

Question

I have two input fields to enter date, which is a jquery datepicker. Using that I can select dates. They are check in and check out dates.

Similarly I have two select box, from which I can select the time. They are check in and check out time.

Eg:

Check in date: 01/05/2014
Check in time: 13:00


Check out date: 04/05/2014
Check out time: 18:00

I want the result: Difference between (01/05/2014 13:00) and (04/05/2014 18:00) like 3days 5 hrs

Fiddle

Right now I am getting the result NAN

Following is the script I am using:

$(document).ready(function(){
    $("#diff").focus(function(){
        var start = new Date($('#din').val());
        var end = new Date($('#dou').val());
        var diff = new Date(end - start);
        var days = Math.floor(diff/1000/60/60/24);
        var hours = Math.floor((diff % ( 1000 * 60 * 60 * 24)) / 1000 / 60 / 60);
         $("#diff").val(days+' Day(s) '+hours+' Hour(s)');
    });
});

Answer 1

Fiddle Demo

$(document).ready(function () {
    function ConvertDateFormat(d, t) {
        var dt = d.val().split('/'); //split date
        return dt[1] + '/' + dt[0] + '/' + dt[2] + ' ' + t.val(); //convert date to mm/dd/yy hh:mm format for date creation.
    }
    $("#diff").focus(function () {
        var start = new Date(ConvertDateFormat($('#din'), $('#tin')));
        var end = new Date(ConvertDateFormat($('#dout'), $('#tout')));
        console.log(start, end);
        var diff = new Date(end - start);
        var days = Math.floor(diff / 1000 / 60 / 60 / 24);
        var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / 1000 / 60 / 60);
        $("#diff").val(days + ' Day(s) ' + hours + ' Hour(s)');
    });
});

---

ConvertDateFormat(d,t) converts the date to current format.

to get new Date('mm/dd/yy hh:mm')

---

Date

---

Update

Problem

Typo

var end = new Date($('#dout').val());
//                         ^ missing t in id it's dout not dou

which makes date invalid so you get NaN when you subtract invalid Date .

Updated Fiddle Demo With your code

Answer 2

You can use the datepicker native getDate feature to get the date object. Then using the information from this SO answer in regards to taking daylight savings into account you can use UTC date times to get the exact differences.

In addition to make setting the date time extremely simple, if you can change the value of your options, set them to the actual hour values, similar to this:

<select id="tin" name="tin">
    <option value="13">13:00</option>
    <option value="19">19:00</option>
</select>

and this

<select id="tout" name="tout">
    <option value="12">12:00</option>
    <option value="18">18:00</option>
</select>

That will make the code so easy using only native date object features to calculate your dates and times, except when dividng by 24 to get the days from the hours, similar to this:

var _MS_PER_HOUR = 1000 * 60 * 60; // 3600000ms per hour
var outputTextWithSign = '{0}{1} Days(s) {2}{3} Hours(s)'; // included sign
var outputTextWithoutSign = '{0} Days(s) {1} Hours(s)'; // no sign

$(function () {
    $("#din, #dout").datepicker({
        minDate: 0,
        dateFormat: 'dd/mm/yy'
    });
});

$(document).ready(function () {
    $("#diff").focus(function () {
        var startDate = $('#din').datepicker('getDate');
        var endDate = $('#dout').datepicker('getDate');

        // use native set hour to set the hours, assuming val is exact hours
        // otherwise derive exact hour from your values
        startDate.setHours($('#tin').val());
        endDate.setHours($('#tout').val());

        // convert date and time to UTC to take daylight savings into account
        var utc1 = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), startDate.getHours(), startDate.getMinutes(), startDate.getSeconds());
        var utc2 = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), endDate.getHours(), endDate.getMinutes(), endDate.getSeconds());

        // get utc difference by always deducting less from more
        // that way you always get accurate difference even if in reverse!
        var utcDiff = utc1 > utc2 ? utc1 - utc2 : utc2 - utc1;

        // get total difference in hours
        var msDiff = Math.floor(utcDiff / _MS_PER_HOUR);

        // get days from total hours
        var dayDiff = Math.floor(msDiff / 24);

        // get left over hours after deducting full days
        var hourDiff = Math.floor((msDiff - (24 * dayDiff)));

        //
        // write out results
        //

        // if you really need to show - sign and not just the difference...
        var sign = utc1 > utc2 ? '-' : '';

        // format output text - with (-)sign if required
        var txtWithSign = outputTextWithSign.format(dayDiff ? sign : '', dayDiff, hourDiff ? sign : '', hourDiff);

        // simple format without sign
        var txtNoSign = outputTextWithoutSign.format(dayDiff, hourDiff);

        // assign result - switch with/without sign result as needed
        $("#diff").val(txtWithSign);
        //$("#diff").val(txtNoSign);
    });
});

// Helper for easy string formatting.
String.prototype.format = function () {
    //var s = arguments[0];
    var s  = this;

    for (var i = 0; i < arguments.length; i++) {
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i]);
    }

    return s;
}

---

DEMO - Get Day and Hour difference, taking daylight savings into account

---

Answer 3

use jQuery datePicker to pick dates

and for difference try this one..

html

<input type="text" id="date1">
<input type="text" id="date2">
<input type="text" id="calculated">


$(document).ready(function () {

var select=function(dateStr) {
      var d1 = $('#date1').datepicker('getDate');
      var d2 = $('#date2').datepicker('getDate');
      var diff = 0;
      if (d1 && d2) {
            diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
      }
      $('#calculated').val(diff);
}

$("#date1").datepicker({ 
    minDate: new Date(2012, 7 - 1, 8), 
    maxDate: new Date(2012, 7 - 1, 28),
    onSelect: select
});
$('#date2').datepicker({onSelect: select});
});