Skip to the content.


Option 1: NPM install - Install from npm and use within your project

 npm install html-duration-picker  

Option 2: CDN - use latest version form jsdelivr

<script src=""></script>

Option 3: Download - Download dist/html-duration-picker.min.js and include it in your HTML file, just before the </body> tag. like this:

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

Example Usage

add a html-duration-picker class on any <input>box. like this:

<input class="html-duration-picker">


Regular Input box
<input type="text">

Duration Input box
<input class="html-duration-picker">

Hide Seconds
<input class="html-duration-picker" data-hide-seconds>


Set default value to 15 minutes <input type="text" class="html-duration-picker" data-duration="00:15:00" >

Set maximum value to 35 minutes <input type="text" class="html-duration-picker" data-duration-max="00:35:00" >

Set minimum value to 5 minutes <input type="text" class="html-duration-picker" data-duration-min="00:05:00" >