Bootstrap4 duration picker
npm install bootstrap4-duration-pickerJavascript 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)
``js
$('.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 thesetValue
// first time or when it's re-initialized by calling 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.