CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-datetimepicker
user3356094
user3356094

Reputation:

Bootstrap Timepicker - Minute Intervals

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.

Upvotes: 4

Views: 32914

Answers (2)

HVKotak
HVKotak

Reputation: 258

Just give "minuteStepping" option like below

$('.time').datetimepicker({
    pickDate: false,
    use24hours: true,
    minuteStepping: 15,
    format: 'HH:mm'
  });

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 6

Related Questions