Human-readable Duration Picker Widget For jQuery UI - timeDurationPicker

File Size: 36.5 KB
Views Total: 5336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Human-readable Duration Picker Widget For jQuery UI - timeDurationPicker

timeDurationPicker is a human-friendly jQuery UI time & duration picker which allows the user to pick duration in years, months, days, hours, minutes and seconds.

How to use it:

1. Include the necessary jQuery and jQuery UI on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Include a jQuery UI theme of your choice in the head sections of the webpage.

<link rel="stylesheet" href="//">

3. Create input fields for the duration picker.

<input type="text" readonly="readonly" id="duration" />
<input type="hidden" name="seconds" value="0" id="seconds" />

4. Active the duration picker and make the duration picked by your user more human readable.

$(document).ready(function() {
    onselect: function(element, seconds, humanDuration) {
      console.log(seconds, humanDuration);

5. Default plugin options.


  // language
  lang: "en_US",

  // extra css properties
  css: {
    position: "absolute"

  // enable/disable slots
  years: true,
  months: true,
  days: true,
  hours: true,
  minutes: true,
  seconds: false


v2.2.6 (2022-04-16)

v2.2.5 (2019-06-21)

  • Date parser refactoring

v2.2.3 (2019-06-21)

  • Fix default value

v2.2.2 (2019-06-20)

  • Improve validation


  • JS update


  • JS update
  • Fix widget position


  • JS update

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