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

Category: Date & Time , Javascript | July 16, 2020
Author: nadchif
Views Total: 134 views
Official Page: Go to website
Last Update: July 16, 2020
License: MIT

Preview:

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

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:

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

You Might Be Interested In:


One thought on “Easy Duration Picker In Vanilla JavaScript – html-duration-picker.js

Leave a Reply