Minimal Duration Picker Plugin For jQuery and Bootstrap

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:

• 7 Best Duration Pickers In JavaScript

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.