如何防止 jQuery bootstrap ClockPicker 获得不可被 5 整除的分钟数答案

【问题标题】：How to prevent jQuery bootstrap ClockPicker to get minutes that are not divisible by 5如何防止 jQuery bootstrap ClockPicker 获得不可被 5 整除的分钟数
【发布时间】：2016-02-14 12:09:30
【问题描述】：

我正在使用jQuery bootstrap ClockPicker 并且只需要获取他们的分钟可以被 5 整除的次数。例如，如果用户选择 13:08，ClockPicker 应该选择 13:05。

有没有办法覆盖时钟选择器以向下舍入选定的时间分钟？

【问题讨论】：

我不明白这个问题，默认情况下，你只能设置能被5分钟整除的时间。 i.stack.imgur.com/Tea6d.png
不，默认不是，你可以选择不能被5整除的分钟。

标签： javascript jquery rounding timepicker time-select

【解决方案1】：

我没有找到使用API 的方法。所以我用afterDone回调写了一个。

我解析输入的值并进行更改以获得新的分钟值。

var clockpicker = $('.clockpicker').clockpicker({
  afterDone: function() {
    clockpicker.val(round());
  }
}).find('input');

function round() {
  var time = clockpicker.val(),
      arr = time.split(':'),
      hour = arr[0],
      min = arr[1],
      newMin = (Math.floor(parseInt(min) / 5)) * 5;

  return hour + ':' + (newMin > 9 ? '' : '0') + newMin;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.js"></script>

<div class="input-group clockpicker col-xs-6">
  <input type="text" class="form-control" value="09:30">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-time"></span>
  </span>
</div>

http://jsbin.com/lopufu/edit?html,js

【讨论】：

我只是使用输入的onchange 函数来执行此操作。但afterDone 回调似乎更好。谢谢。

【解决方案2】：

如果您不介意对 Clockpicker 进行更改（我必须为 IE 进行更改），请在 bootstrap-clockpicker.js 中添加一个非官方选项，例如“roundmodfive”：
1.改变这个

// Hours and minutes are selected
ClockPicker.prototype.done = function() {
    raiseCallback(this.options.beforeDone);
    this.hide();
    var last = this.input.prop('value'),
        value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
    if  (this.options.twelvehour) {
        value = value + this.amOrPm;
    }
...

2。以此

// Hours and minutes are selected
ClockPicker.prototype.done = function() {
    raiseCallback(this.options.beforeDone);
    this.hide();

    var last = this.input.prop('value');
    //Unofficial option added
    /*
        Just an explain:
            I like rounding. Thus, for example 43min => 45 and 42min => 40.
            The minutes are base 60, so you have to make modulus 60.
    */
    if (this.options.roundmodfive) {
        this.minutes = (Math.round(parseInt(this.minutes) / 5)) * 5 % 60;
    }

    var value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
    if  (this.options.twelvehour) {
        value = value + this.amOrPm;
    }
...

【讨论】：

虽然修改库的源代码不是最好的方法，但如果它正在工作，它可能算作某种修补程序。