html-duration-picker/README.md

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

# html-duration-picker.js

![npm](https://img.shields.io/npm/v/html-duration-picker?color=f00)
![Push Basic Tests](https://github.com/nadchif/html-duration-picker.js/workflows/Push%20Basic%20Tests/badge.svg)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/0985f9e73d5b488a9f55401e471170ec)](https://www.codacy.com/gh/nadchif/html-duration-picker.js/dashboard?utm_source=github.com&utm_medium=referral&utm_content=nadchif/html-duration-picker.js&utm_campaign=Badge_Grade)
[![first-timers-only](https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square)](https://www.firsttimersonly.com/)
[<img src="https://img.shields.io/badge/slack-ossenthusiasts-maroon.svg?logo=slack">](https://join.slack.com/t/ossenthusiasts/shared_invite/zt-kfefjyas-uQyS65QWQV5IAjT86vr8Tg)

html-duration-picker.js 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.

**BEFORE** `<input type="text"> `

![Default Input](https://i.imgur.com/paB6Biy.jpg)

**AFTER** `<input type="text" class="html-duration-picker">`

![Duration Picker Input](https://i.imgur.com/vewRUA6.jpg)

[See Live Demo](https://nadchif.github.io/html-duration-picker.js/)

Why use html-duration-picker? 

-  Tiny (&lt; 10 kb)
-  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

## Contributors

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.  Check out the list of [CONTRIBUTORS.md](https://github.com/nadchif/html-duration-picker.js/blob/master/CONTRIBUTORS.md).

## 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](https://github.com/nadchif/html-duration-picker.js/blob/master/CONTRIBUTING.md).

## Documentation

See [DOCUMENTATION.md](https://github.com/nadchif/html-duration-picker.js/blob/master/DOCUMENTATION.md) for instructions on how to install and use it in your project.