jessicabrady16-html-duration-picker

Turn an html input box to a duration picker, without jQuery

Usage no npm install needed!

<script type="module">
  import jessicabrady16HtmlDurationPicker from 'https://cdn.skypack.dev/jessicabrady16-html-duration-picker';
</script>

README

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

All Contributors

npm Push Basic Tests first-timers-only

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

💻

This project follows the all-contributors specification. Contributions of any kind welcome!