how to use bootstrap timepicker

See more:

jQuery

bootstrap

HERE i hav using normally add the time to calculate the hours but i hav need to bootstrap timepicker

if i hav search it web its all of use it datetime picker and then i need only selete timepicker only how i use it

    <label for="time1">Start time:</label>
<input type="time" id="time1" class="form-control" value="21:00:00" onchange="diff()"/>

<label for="time2">End time:</label>
<input type="time" id="time2" class="form-control" value="00:00:00" onchange="diff()"/>

<div>
<label for="output">Difference</label>
<input type="text" id="output" class="form-control" disabled="disabled" value="--:--:--" />
</div>

var startTime = document.getElementById("time1");
var endTime = document.getElementById("time2");

function pad(n, width, spacer) {
  n = '' + n;
  spacer = spacer || '0';
  width = width || 2;
  
  return new Array(width - n.length + 1).join(spacer) + n;
}

function getDifference() {
  var formatIn = "hh:mm:ss",
      t1 = moment(startTime.value, formatIn),
      t2 = moment(endTime.value, formatIn);
  
  if (t1.format("a") === "pm" && t2.format("a") === "am") {
    t2.add(1, 'day');
  }
  
  var ms = Math.abs(t2.diff(t1));
  var dur = moment.duration(ms);
  return pad(dur.hours()) + ":" + pad(dur.minutes()) + ":" + pad(dur.seconds());
}

var diffEl = document.getElementById("output");
function diff() {
  diffEl.value = getDifference();
}

diff();