如何覆盖 Bootstrap DatePicker 以允许任意时间选择？

Question

我正在使用 Bootstrap Date picker control 允许 selection 任意小时数。因此，例如，用户可以 select 1 -> 50 hours.

之间的任何位置

在当前设置中，我将格式选项设置为仅允许小时 selection 使用 format: 'HH'，但这将最大小时 selection 限制为 23 小时。

问题有谁知道如何覆盖 Bootstrap 日期选择器上的默认小时 selection 值？

在下面的日期选择器中 select一个小时大于比 23 将选择器重置为 0:

这是脚本和选项中日期选择器的声明：

    //Init the Next Update arbitrary hour picker
    $(function () {
        $('#NextUpdateDisplay').datetimepicker({
            ignoreReadonly: true,
            allowInputToggle: true,
            format: 'HH',
            widgetPositioning: {
                horizontal: 'right',
                vertical: 'bottom'
            }
        });
    });

Answer 1

在Bootstrap.timepicker.js中找到这一行：

`this.hour >= 24 ? this.hour = 23`

改为：

`this.hour >= 51 ? this.hour = 50`

确保在实例化 timepicker 时使用 showMeridian = false 作为选项：

$(".timepicker").timepicker({
    showMeridian: false
});

EDIT: 如果你想让其他DatePickers正常:

复制TimePicker到新对象TimePickerEx,
覆盖您想要的功能（可以使用 Object.create()、

收益率：

function TimePickerEx() {
  return Object.create(TimePicker(), {
    setTime: function(time, ignoreWidget) {
      if (!time) {
        this.clear();
        return;
      }

      var timeArray,
          hour,
          minute,
          second,
          meridian;

      if (typeof time === 'object' && time.getMonth){
        // this is a date object
        hour    = time.getHours();
        minute  = time.getMinutes();
        second  = time.getSeconds();

        if (this.showMeridian){
          meridian = 'AM';
          if (hour > 12){
            meridian = 'PM';
            hour = hour % 12;
          }

          if (hour === 12){
            meridian = 'PM';
          }
        }
      } else {
        if (time.match(/p/i) !== null) {
          meridian = 'PM';
        } else {
          meridian = 'AM';
        }

        time = time.replace(/[^0-9\:]/g, '');

        timeArray = time.split(':');

        hour = timeArray[0] ? timeArray[0].toString() :                 timeArray.toString();
        minute = timeArray[1] ? timeArray[1].toString() : '';
        second = timeArray[2] ? timeArray[2].toString() : '';

        // idiot proofing
        if (hour.length > 4) {
          second = hour.substr(4, 2);
        }
        if (hour.length > 2) {
          minute = hour.substr(2, 2);
          hour = hour.substr(0, 2);
        }
        if (minute.length > 2) {
          second = minute.substr(2, 2);
          minute = minute.substr(0, 2);
        }
        if (second.length > 2) {
          second = second.substr(2, 2);
        }

        hour = parseInt(hour, 10);
        minute = parseInt(minute, 10);
        second = parseInt(second, 10);

        if (isNaN(hour)) {
          hour = 0;
        }
        if (isNaN(minute)) {
          minute = 0;
        }
        if (isNaN(second)) {
          second = 0;
        }

        if (this.showMeridian) {
          if (hour < 1) {
            hour = 1;
          } else if (hour > 12) {
            hour = 12;
          }
        } else {
          if (hour >= 51) {
            hour = 50;
          } else if (hour < 0) {
            hour = 0;
          }
          if (hour < 13 && meridian === 'PM') {
            hour = hour + 12;
          }
        }

        if (minute < 0) {
          minute = 0;
        } else if (minute >= 60) {
          minute = 59;
        }

        if (this.showSeconds) {
          if (isNaN(second)) {
            second = 0;
          } else if (second < 0) {
            second = 0;
          } else if (second >= 60) {
            second = 59;
          }
        }
      }

      this.hour = hour;
      this.minute = minute;
      this.second = second;
      this.meridian = meridian;

      this.update(ignoreWidget);
    },
  }); 
}

使用：

var timePickerEx = TimePickerEx();

其余部分使用正常的TimePicker。

如何覆盖 Bootstrap DatePicker 以允许任意时间选择？

How to override Bootstrap DatePicker to allow arbitrary hours selection?

jquery

twitter-bootstrap-3

bootstrap-datepicker

hour