JSFiddle - React, Tailwind, and code Playground

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 () {
     $("#diff").focus(function () {
         var start = new Date($('#din').val());
         var end = new Date($('#dout').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)');
     });
 });