如何覆盖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()来完成的功能，

• Yeilding：

  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对于其余的。