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

Preview:

Description:

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

Changelog:

v2.4.0 (01/16/2023)

• Remove AIV
• Fix angular value not updating when using up or down arrow
• Update Webpack version

v2.3.5 (04/05/2022)

• Fixed bug where seconds would reappear in hide seconds mode

v2.3.4 (11/18/2021)

• bug fixes for Safari and Mobile (Android) browsers
• added regex patterns as safety fallback by browser validation
• validation of inputs on keydown (PC)
• max value is now 99:59:59 by default, but you can override using data-max-duration attribute

11/14/2021

• v2.3.2: fixes broken button functionality when in “hide seconds” mode

11/14/2021

• v2.3.0: changed data-adjustment-mode attribute to data-adjustment-factor

04/18/2021

• v2.2.13: Fixes cursor jumping to the end of input while editing the value on Safari

12/23/2020

• v2.2.12: Fixes other classes being replaced on picker elements

12/03/2020

• v2.2.11: Fixed for IE

11/30/2020

• v2.2.10: Use CSS styles over inline styles

11/08/2020

• v2.2.9: Adds TAB key support to the pickers

07/16/2020

• v2.2.8: Fixes auto submit bug.

07/03/2020

• v2.2.7: Fixes selection issue when hiding seconds

07/01/2020

• v2.2.6: Bugfixed

05/21/2020

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

05/19/2020

• v2.2.4: Optimized release for smaller build

05/14/2020

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

04/12/2020

• v2.2.0: Added min and max value functionality

03/11/2020

• v2.1.3: fixed broken continuous increase in Chrome