Bootstrap Duration picker
Branch: master
Clone or download
koss-lebedev Merge pull request #16 from ml054/master
Allow to use bootstrap 3.X.X
Latest commit 9d6019c Jun 30, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Add destroy() method Jun 15, 2017
dist Add destroy() method Jun 15, 2017
src Add destroy() method Jun 15, 2017
.editorconfig Fix liniting erros May 17, 2017
.eslintrc.json Fix value parsing when days are disabled Apr 23, 2017
.gitignore Improve localization ability Apr 23, 2017
LICENSE Add LICENSE Sep 24, 2016 Add destroy() method Jun 15, 2017
bower.json Allow to use bootstrap 3.X.X Jun 30, 2017
demo.png New preview image Mar 31, 2017
gulpfile.js Eslint fixes May 20, 2017
package.json Bump up version to 2.1.3 Jun 15, 2017


Javascript library for selecting duration. Target input to which plugin is applied will contain duration in seconds.

Code Climate npm version Bower version


Using Bower:

bower install bootstrap-duration-picker

Using NPM:

npm install bootstrap-duration-picker

Or simply copy bootstrap-duration-picker.css and bootstrap-duration-picker.js files to your project.




  • jQuery 1.*
  • Bootstrap 3.* (for styling only)



// or

    // optional object with translations (English is used by default)
    translations: {
        day: 'dia',
        hour: 'hora',
        minute: 'minuto',
        second: 'segundo',
        days: 'dias',
        hours: 'horas',
        minutes: 'minutos',
        seconds: 'segundos',

    // defines whether to show seconds or not
    showSeconds: false,

    // defines whether to show days or not
    showDays: true,

    // callback function that triggers every time duration is changed 
    //   value - duration in seconds
    //   isInitializing - bool value
    onChanged: function (value, isInitializing) {
        // isInitializing will be `true` when the plugin is initialized for the
        // first time or when it's re-initialized by calling `setValue` method
        console.log(value, isInitializing);

Public methods

Method Example Description
setValue $('#selector').data('durationPicker').setValue(0); Allows to reinitialize duration picker value after it's been created. Accepts new number of seconds
destroy $('#selector').data('durationPicker').destroy(); Destroys the plugin, reverting any DOM changes made by the plugin


Please see LICENSE for licensing details.