Minimal Duration Picker Plugin For jQuery and Bootstrap

File Size: 41.3 KB
Views Total: 14625
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.


4. Customize the duration picker. Here's a list of default options which can be passed into the duration picker on init.

  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'




  • Add destroy() method


  • v2.1.2: Pass isInitializing to onChanged callback


  • v2.1.1: Add method to reset picker value


  • Fix value parsing when days are disabled


  • New UI for duration picker


  • Use babel and ES6 syntax


  • Refactor code duplication


  • Fix CSS lint issues mockup


  • 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.