Search code examples
javascriptjqueryadminlte

Difference between two time picker

I am creating an Over time system, where users input there Start time and End time of there OT, my problem is I don't know how to compute hrs rendered of there over time.

Here's sample of output:

In this sample user start there OT at 6pm and end at 8pm then the output must be 2 hrs.

enter image description here

Here's my Code:

<div class="bootstrap-timepicker">
    <div class="form-group">
        <label>FROM</label>
        <div class="input-group">
            <input id="timeFrom" type="text" class="form-control timepicker">
        </div>
    </div>
</div>

<div class="bootstrap-timepicker">
    <div class="form-group">
        <label>TO</label>
        <div class="input-group">
            <input id="timeTO" type="text" class="form-control timepicker">
        </div>
    </div>
</div>

I am currently using time picker of Adminlte

Solution 

  • $('.timepicker').timepicker();

function getDiff() {
  var timeFrom = $('#timeFrom').data('timepicker');
  var timeTO = $('#timeTO').data('timepicker');
debugger;
  var timeFromHH = (timeFrom.hour == 12 && timeFrom.meridian == "AM") ? 0 :
    (timeFrom.hour != 12 && timeFrom.meridian == "PM") ? timeFrom.hour + 12 :
    timeFrom.hour;
  var timeTOHH = (timeTO.hour == 12 && timeTO.meridian == "AM") ? 0 :
    (timeTO.hour != 12 && timeTO.meridian == "PM") ? timeTO.hour + 12 :
    timeTO.hour;

  var timeFromMM = timeFromHH * 60 + timeFrom.minute;
  var timeTOMM = timeTOHH * 60 + timeTO.minute;

  var diffMM = Math.abs(timeTOMM - timeFromMM);
  var diff = Math.floor(diffMM / 60) + "hrs " + (diffMM % 60) + "mins";
  
  $("#diff").text(diff);
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>

<div class="bootstrap-timepicker">
  <div class="form-group">
    <label>FROM</label>
    <div class="input-group">
      <input id="timeFrom" type="text" class="form-control timepicker">
    </div>
  </div>
</div>


<div class="bootstrap-timepicker">
  <div class="form-group">
    <label>TO</label>
    <div class="input-group">
      <input id="timeTO" type="text" class="form-control timepicker">
    </div>
  </div>
</div>

<button onclick="getDiff()">Get Diff</button>
<label id="diff"></label>