Bootstrap Timepicker - 分钟间隔

时间:2014-04-14 11:05:45

标签: javascript jquery twitter-bootstrap bootstrap-datetimepicker

我最近从使用jquery UI timepicker转换为使用找到here的时间戳,因为看起来jQuery UI与Twitter Bootstrap不兼容。

我设法让datepicker和timepicker工作,但我缺乏旧时间选择器的一些功能 - 能够在几分钟内控制步骤。我希望只允许用户以15分钟的间隔增加时间戳的分钟数。这使用以下语法与jQuery UI完美配合:

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

我当前的代码,调用timepicker罚款:( stepMinute没有效果,可能是这个时间戳的语法不正确)

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

我希望使用在此问题开头链接的引导友好时间戳来模拟这一点,非常感谢任何帮助。

2 个答案:

答案 0 :(得分:6)

如果您不想更改插件代码,则可以在步骤中使用change.bfhtimepicker事件广告递增/递减小时和分钟。

或者,它会因UI而显得略有不同,但您可以切换到另一个实现minuteStep功能的bootstrap timepicker插件。

代码:

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

演示:http://jsfiddle.net/IrvinDominin/e3k37/

参考:http://jdewit.github.io/bootstrap-timepicker/

答案 1 :(得分:-1)

只需提供“minuteStepping”选项,如下所示

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