Accessible Duration Picker In jQuery - Duration.js
File Size: | 4.9 KB |
---|---|
Views Total: | 841 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A duration picker is a component that allows users to set an end date for an event or activity.
In this article, we'll see a lightweight jQuery duration picker plugin for selecting durations, such as time until a deadline passes, service interval durations, event occurrence times and much more.
Users can increment & decrement values by pressing up/down keys or by clicking the Up/Down buttons on the interface.
How to use it:
1. Download the plugin and load the following JS & CSS files.
<!-- jQuery --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- jQuery Duration.js Plugin --> <link rel="stylesheet" href="duration.css" /> <script src="duration.js"></script>
2. Create a container to hold the duration picker.
<div id="example"></div>
3. Call the function on the container element to generate a default duration picker.
$(function(){ $('#example').durationjs(); });
4. Set the display mode:
- d: day
- h: hour
- m: minute
- s: second
$('#example').durationjs({ display:"hm", });
5. Set the step size for each slot:
$('#example').durationjs({ sInc: 1, mInc: 15, hInc: 1, dInc: 1, });
6. Set the initial value in seconds:
$('#example').durationjs({ initVal: 0 });
This awesome jQuery plugin is developed by nickblum. For more Advanced Usages, please check the demo page or visit the official website.