Get Day and Hour difference, taking daylight savings into account

by Francois Wahl

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<p>
    <label>Check in:</label>
    <input name="din" type="text" id="din">
</p>
<p>
    <label>Check out:</label>
    <input name="dout" type="text" id="dout">
</p>
<p>
    <label>Time in:</label>
    <select id="tin" name="tin">
        <option value="13">13:00</option>
        <option value="19">19:00</option>
    </select>
</p>
<p>
    <label>Time out:</label>
    <select id="tout" name="tout">
        <option value="12">12:00</option>
        <option value="18">18:00</option>
    </select>
</p>
<p>
    <label>Difference:</label>
    <input name="diff" type="text" id="diff">
</p>

CSS

label {
    float:left;
    width: 75px;
}

JavaScript

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);
        
...