如何覆蓋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對於其餘的。