JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
 <table class="table">
                              <tr>
                                <td width="15%">PERSONNEL 1</td>
                                <td width="30%">
                                      <div class='input-group date personnel_dtc' >
                                        <input type='text' id="timestart" name="timestart" class="form-control" placeholder="Start"  />
                                        <span class="input-group-addon">
                                            <span class="fa fa-calendar"></span>
                                        </span>
                                    </div>
                                </td>
                                <td width="30%">
                                      <div class='input-group date personnel_dtc' >
                                        <input type='text' id="timefinished" name="timefinished" class="form-control" placeholder="Finished" onblur="calctimerendered()" />
                                        <span class="input-group-addon">
                                            <span class="fa fa-calendar"></span>
                                        </span>
                                    </div>
                                </td>
                                <td width="15%">
                                    <input type='text'...

JavaScript

function calctimerendered()
 {
 var ts=$('#timestart').val();
var tf=$('#timefinished').val();


var timeStart = new Date(ts);
var timeEnd = new Date(tf);

var diff = (timeEnd - timeStart) / 60000; //dividing by seconds and milliseconds

var minutes = diff % 60;
var hours = (diff - minutes) / 60;

$('#timerendered').val(hours);

}