Set Duration In Days, Hours And Minutes - durationPicker.js

A lightweight and configurable duration picker plugin that automatically calculates the duration (in seconds) between two dates & times.

The plugin generates Days, Hours, and Minutes select dropdowns on the webpage and returns the duration (in seconds) after you select a date & time.

How to use it:

1. Insert the durationPicker.js script afer jQuery.

<script src="jquery.min.js"></script>
<script src="jquery.durationpicker.js"></script>

2. Create a HIDDEN input field for the duration picker.

<input type="hidden" name="example" />

3. Create an empty element to place the result.

<span id="output-example">Select A Value</span>

4. Initialize the duration picker and output the result in the span element using the change event.

$('input[name=example]').durationPicker()
.on("change", function($val){
  $('#output-example1').text("Duration (secs): " + $(this).val());
});

5. Apply your own CSS styles to the select dropdowns.

.duration-picker-container{
  font-size: 14px;
}

.duration-picker-container select{
  width: 45px;
  display: inline-block;
  height: 26px;
  padding: 0;
  box-sizing: content-box;
  border-radius: 3px;
  margin-left: 10px;
  background: #fff;
  border: 1px solid #e1e1e1;
  font-size: 13px;
}

6. Enable/disable Days, Hours, and Minites select dropdowns.

$('input[name=example]').durationPicker({
  showDays: true,
  showHours: true,
  showMins: true
});

7. Custom labels for days, hours and minutes.

$('input[name=example]').durationPicker({
  daysLabel: 'Days',
  hoursLabel: 'Hours',
  minsLabel: 'Minutes'
});

8. No zero time allowed.

$('input[name=example]').durationPicker({
  allowZeroTime: false
});

---

This awesome jQuery plugin is developed by InkWired. For more Advanced Usages, please check the demo page or visit the official website.