Jessicabrady16-html-duration-picker NPM

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.