Accessible Duration Picker In jQuery - Duration.js

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.