Calculate Duration Between 2 Times - differenceHours

Calculate Duration Between 2 Times - differenceHours

differenceHours is a minimal jQuery plugin which compares the difference between 2 times and calculates/displays the duration in hours and minutes on the page.

1. Include the JavaScript file differenceHours.js on the page, after you've loaded the latest jQuery library.

<script src="" 
<script src="differenceHours.js"></script>

2. Create two text fields to accept the time input.

<h2> Time 1 </h2>
<input type="time" id="time1" placeholder="">
<h2> Time 2 </h2>
<input type="time" id="time2" placeholder="">

3. Create a container element to display the result.

<span id="result" class="">00h00m</span>

4. Initialize the plugin to display the result after you type the times.

$('input').on('keyup change',function () {
  differenceHours.diff_hours('time1', 'time2', 'result')

This awesome jQuery plugin is developed by africa-able. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.06.2019
  • Source