--- layout: default ---

Installation

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="https://cdn.jsdelivr.net/npm/html-duration-picker@latest/dist/html-duration-picker.min.js"></script>
</body>
    

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>
</body>

Example Usage

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

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

Result:

Regular Input box
<input type="text">

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

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

Features:

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" >