bootstrap-datetimepicker初學者經驗

這款datetimepicker的确很好用，大部分内容還是參考這裡：http://www.bootcss.com/p/bootstrap-datetimepicker/

但是在我的使用下仍舊發現了一些問題：

如果僅僅是照搬網站上的内容可能無法達到所需的要求，可能有的人已經解決了，我這裡也隻是再提一下而已。

首先這款插件在網站上所使用的案例仍舊是bootstrap2的，如果需要使用bootstrap3，可以先下載下傳包，然後從裡面的bootstrap3案例裡面去參考。

檢視例子的時候是不是會發現如下情況，日期的指向在了清除的按鈕上，而我們更希望能放在後面顯示日期的按鈕上。

this.component = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-th, .input-group-addon .glyphicon-time, .input-group-addon .glyphicon-remove, .input-group-addon .glyphicon-calendar, .input-group-addon .fa-calendar, .input-group-addon .fa-clock-o').parent() : this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar, .add-on .fa-calendar, .add-on .fa-clock-o').parent()) : false;
    this.componentReset = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-remove, .input-group-addon .fa-times').parent():this.element.find('.add-on .icon-remove, .add-on .fa-times').parent()) : false;
           

上面這段代碼是剛下載下傳下來時候的。

對這段代碼進行修改可以自定義産生日期div和删除圖示控件，可以看到曾經的bootstrap2是預設支援fontawesome的圖示的，但是bootstrap3需要我們在這裡手動添加，也可以添加其他包的圖示。

例如我就在component中删除了

.input-group-addon .glyphicon-remove
           

控制在點選remove後不會再彈出日期控件

component中添加了

.input-group-addon .icon-calendar
           

componentReset添加了

.input-group-addon .icon-remove
           

用以支援fontawesome

效果：

//

this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;
           

通過配置fontAwesome：true可以更改上方左右的箭頭，但是給出的

this.icons = {
      leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'),
      rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right')
    }
    this.icontype = this.fontAwesome ? 'fa' : 'glyphicon';
           

這段代碼中fa-arrow-left應該不是fontawesome現在版本的東西吧可以自行修改

//這部分内容是寫到一半看到的。。。順帶看了一下也寫上來了

接下來這個問題應該是datetimepicker的一個小bug

我設定了當天為endDate，但是卻發現在月份這一項中無法選擇五月，其實四月也是無法選中的

其原因是，插件是根據div中元素個數來确定的，然而div中不是隻有一月到十二月這十二個元素，還有兩個元素被計算進去了，就是年份邊上的兩個箭頭。。。

這就導緻了有2個月的偏差，其實這個偏差在程式中是有寫的。可能隻是忘了加到這裡而已，如下面把offset加到endMonth上就可以了

if (year == endYear) {
        months.slice(endMonth+offset).addClass('disabled');
      }
           

以上就是本次記錄~~~雖然還發現了一個問題，但是還沒解決，就不寫了