Author: | nadchif |
---|---|
Views Total: | 1,876 views |
Official Page: | Go to website |
Last Update: | January 16, 2023 |
License: | MIT |
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
how to use on append with this
Not working on dynamically appended input, Please help me
thank you