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

Question

我使用Bootstrap Date picker control 来允许选择任意数量的小时。例如，用户可以选择1 -> 50 hours.

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

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

在下面的日期选择器中选择一个小时大于大于 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
});

编辑：如果您希望其他 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。