Convert HTML Input Box to Duration Picker | html-duration-picker.js

HTML-duration-picker.js is a very small JS library used to convert the original HTML text input into a duration picker and the chooser to feel that it is as original as possible.

Why use html-duration-picker?

  • Tiny (< 10 kb)
  • No additional dependencies (CSS, jQuery, etc)
  • Bootstrap 3 and Bootstrap 4 Compatible
  • Angular Compatible
  • You can modify and improve it 🙂
  • Absolutely FREE!

Must Read: Angular Component for ISO_8601 Durations Picker Library

How to make use of 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.

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

3. Set the initial period.

<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 second slot.

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


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar
Fully Customizable One Time Password OTP Component | ng-otp-input

See Demo And Download

Official Website(nadchif): Click Here

This superior jQuery/javascript plugin is developed by nadchif. For extra advanced usage, please go to the official website.