Javascript library for selecting duration. Target input to which plugin is applied will contain duration in seconds.
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)
$('.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);
}
});
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.