HTML Duration Picker: "data-hide-hours" Edition

npm

jessicabrady16-html-duration-picker.js is fork of html-duration-picker.js, which is a very tiny JS library used for transforming a native HTML text input into a duration picker. The aim is for the picker to feel like a native element as much as possible.

This fork has a data-hide-hours feature as an attribute for the HTML tags in addition to the data-hide-seconds that already existed.

Here is an example with the data-hide-hours attribute:

<input
  data-hide-hours
  type="text"
  class="html-duration-picker"
  data-duration-max="00:15:00"
  data-duration-min="00:00:00"
  data-duration="00:08:03"
  aria-label="Time"
/>

Picker Input With Data-Hide-Hours

Without the data-hide-hours attribute:

Duration Picker Input

Why use html-duration-picker?

Tiny (~7kb)
No additional dependencies (CSS, jQuery, etc)
Bootstrap 3 and Bootstrap 4 Compatible
Angular Compatible
You can modify and improve it :-)
Absolutely FREE!

License

Apache-2.0

Contributions

Contributions and suggestions are very welcome and wanted. I try to respond to pull requests within 48 hours. For more information see CONTRIBUTING.md.

Documentation

See DOCUMENTATION.md for instructions on how to install and use it in your project.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Dan Chif} 💻 🚧 ⚠️	_GeorgeChambi 💻	_Fabian 💻	_{Peter Morgan} 💻 📖	_{Isaac Miti} 💻 📖	_{Omri Dagan} 💻	_jasmap 💻
_{Chamunorwa Mutezva} 📖	_Aryan-Garg 📖	_Solomon 📖	_orama254 📖	_{Gabriel Ferreira Umbelino} 💻	_{Shaun Dixon} 📖	_julionz 💻 🤔
_{Nestser, Uladzislau} 💻 ⚠️	_{Laoise Earle} 📖 💡	_{Ezra Obiwale} 💻	_Kharanshu31 💻	_{Ahmed El Moden} 💻