SO-23407516

by Tushar Gupta

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="01:00 pm">13:00</option>
        <option value="07:00 pm">19:00</option>
    </select>
</p>
<p>
    <label>Time out:</label>
    <select id="tout" name="tout">
        <option value="02:00 pm">12:00</option>
        <option value="06:00 pm">18:00</option>
    </select>
</p>
<p>
    <label>Difference:</label>
    <input name="diff" type="text" id="diff">
</p>

CSS

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

JavaScript

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

$(document).ready(function () {
    function ConvertDateFormat(d, t) {
        var dt = d.val().split('/');
        return dt[1] + '/' + dt[0] + '/' + dt[2] + ' ' + t.val();
    }
    $("#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)');
    });
});