bootstrap-duration-picker's Introduction

bootstrap-duration-picker

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

Installation

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.

Example

Dependencies

jQuery
Bootstrap 5 & 4 (for styling only)

Usage

$('.duration-picker').durationPicker();

// or

$('.duration-picker').durationPicker({
    
    // 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