Minimal Duration Picker Plugin For jQuery and Bootstrap
File Size: | 41.3 KB |
---|---|
Views Total: | 14017 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery & Bootstrap plugin that converts a normal text field into a duration picker allowing the user to set a duration in time.
See Also:
How to use it:
1. Download and include Bootstrap Duration Picker plugin's CSS and JavaScript files on the webpage. Assume that you first have jQuery and Bootstrap framework installed.
<link rel="stylesheet" href="src/jquery-duration-picker.css"> <script src="src/jquery-duration-picker.js"></script>
2. Create a regular text input field for the duration picker.
<input type="text" class="form-control" id="duration">
3. Call the function on the input field and done.
$('#duration').durationPicker();
4. Customize the duration picker. Here's a list of default options which can be passed into the duration picker on init.
$('#duration').durationPicker({ lang: 'en', formatter: function (s) { return s; }, showSeconds: false });
5. Localization.
var langs = { en: { day: 'day', hour: 'hour', minute: 'minute', second: 'second', days: 'days', hours: 'hours', minutes: 'minutes', seconds: 'seconds' } };
Changelog:
2023-02-28
- Updated for Bootstrap 5 & Bootstrap 4.
2017-06-15
- Add destroy() method
2017-06-13
- v2.1.2: Pass isInitializing to onChanged callback
2017-05-18
- v2.1.1: Add method to reset picker value
2017-04-23
- Fix value parsing when days are disabled
2017-03-31
- New UI for duration picker
2017-02-09
- Use babel and ES6 syntax
2017-02-05
- Refactor code duplication
2017-02-04
- Fix CSS lint issues mockup
2016-12-20
- Handle NaN values
This awesome jQuery plugin is developed by koss-lebedev. For more Advanced Usages, please check the demo page or visit the official website.