Calculate Duration Between 2 Times - differenceHours
| File Size: | 4.22 KB |
|---|---|
| Views Total: | 8606 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
How to use it:
1. Include the JavaScript file differenceHours.js on the page, after you've loaded the latest jQuery library.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
</script>
<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.











