Easy Duration Picker In Vanilla JavaScript – html-duration-picker.js

Category: Date & Time , Javascript | May 21, 2020
Author: nadchif
Views Total: 352
Official Page: Go to website
Last Update: May 21, 2020
License: MIT


Easy Duration Picker In Vanilla JavaScript – html-duration-picker.js


A pure JavaScript duration picker that allows the user to pick duration (in hours, minutes, seconds) in a normal input field.

How to use it:

1. Download and include the html-duration-picker.js on the webpage.

<script src="dist/html-duration-picker.min.js"></script>

2. Add the html-duration-picker attribute to the input field and the plugin will take care of the rest.

<input type="text" class="html-duration-picker" />

3. Set the initial duration.

<input type="text" class="html-duration-picker" data-duration="00:32:10" />

4. Set the min/max duration.

<input type="text" class="html-duration-picker" data-duration-max="01:00:00" />
<input type="text" class="html-duration-picker" data-duration-min="00:00:10" />

5. Hide the seconds slot.

<input type="text" class="html-duration-picker" data-hide-seconds />



  • v2.2.5: Fixed bug: Input automatically receiving focus after hovering over buttons


  • v2.2.4: Optimized release for smaller build


  • v2.2.2: Adds css classes to buttons and their container


  • v2.2.0: Added min and max value functionality


  • v2.1.3: fixed broken continuous increase in Chrome

You Might Be Interested In:

Leave a Reply