--- layout: default ---

Example Usage

Download

Include download html-duration-picker.min.js in your HTML file, just before the </body> tag. like this: 

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

CDN

    
    <script src="https://cdn.jsdelivr.net/npm/html-duration-picker@latest/dist/html-duration-picker.min.js"></script>
    </body>

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