Bootstrap Timepicker - Minute Intervals

user3356094 picture user3356094 · Apr 14, 2014 · Viewed 28.2k times · Source

I recently swapped from using jquery UI timepicker to using a timepicker found here as it appears jQuery UI is incompatible with Twitter Bootstrap.

I've managed to get datepicker and timepicker working but I lack some of the functionality of my old timepicker - the ability to control the steps in minutes. I wish to only allow the user to increase the minutes of the timepicker in 15 minute intervals. This worked flawlessly with jQuery UI using the following syntax:

$(function() {
  $('#div_id').timepicker({
    stepMinute: 15
  });
});

My current code, which calls the timepicker fine: (stepMinute gives no effect, likely incorrect syntax for this timepicker)

jQuery(function($){
    $('#div_id').timepicker({
        stepMinute: 15
    });
});

I wish to emulate this using the bootstrap-friendly timepicker linked at the start of this question, any help is greatly appreciated.

Answer

Irvin Dominin picture Irvin Dominin · Apr 14, 2014

If you don't want to change the plugin code you can use change.bfhtimepicker event ad increment/decrement hour and minutes by your step.

Alternatively, it will appear a little different because the UI, but you can switch to another bootstrap timepicker plugin that implements minuteStep feature.

Code:

$('#timepicker1').timepicker({
    defaultTime: 'current',
    minuteStep: 15,
    disableFocus: true,
    template: 'dropdown'
});

Demo: http://jsfiddle.net/IrvinDominin/e3k37/

Ref: http://jdewit.github.io/bootstrap-timepicker/