Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nadchif/html-duration-picker.js

Turn an HTML input box to a duration picker, without jQuery
https://github.com/nadchif/html-duration-picker.js

css duration-picker html input input-method inputform javascript vanilla vanilla-javascript

Last synced: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/nadchif/html-duration-picker.js
Owner: nadchif
License: apache-2.0
Created: 2019-12-01T09:10:03.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-03-20T12:47:10.000Z (8 months ago)
Last Synced: 2024-09-19T04:19:33.436Z (about 2 months ago)
Topics: css, duration-picker, html, input, input-method, inputform, javascript, vanilla, vanilla-javascript
Language: JavaScript
Homepage: https://nadchif.github.io/html-duration-picker.js/
Size: 997 KB
Stars: 43
Watchers: 4
Forks: 61
Open Issues: 8
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # 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/)

[](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** ` `

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

**AFTER** ``

![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 (< 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.