bootstrap datetimepicker控件位置異常的解決方法

更新時間：2017年11月23日 11:53:40 作者：_rdOfJava

這篇文章主要為大家詳細介紹了bootstrap datetimepicker控件位置異常的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天在寫畢設(shè)的時候，用到了bootstrap-datetimepicker作為日期控件。

在git上clone下最新的代碼，運行demo，發(fā)現(xiàn)控件區(qū)域整體下移1000px左右。

作為一個準備拿來就用的后臺程序猿，此刻我的內(nèi)心是崩潰的…

百度了很久，沒有找到對應(yīng)的解決方案，于是自己動手去源碼修改。

最終解決方案：

打開源碼，的bootstrap-datetimepicker.js文件

line 527行，打開這一段注釋即可

 /*if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
    top = offset.top - this.picker.outerHeight();
   } else {
    top = offset.top + this.height;
   }*/

如果看著還是不是很舒服的話，建議注釋掉line 533 - line 544

top = top - containerOffset.top + 169;
left = left - containerOffset.left + 210;

為什么要這樣解決呢？

  place: function () {
   if (this.isInline) return;

   if (!this.zIndex) {
    var index_highest = 0;
    $('div').each(function () {
     var index_current = parseInt($(this).css('zIndex'), 10);
     if (index_current > index_highest) {
      index_highest = index_current;
     }
    });
    this.zIndex = index_highest + 10;
   }

   var offset, top, left, containerOffset;
   if (this.container instanceof $) {
    containerOffset = this.container.offset();
   } else {
    containerOffset = $(this.container).offset();
   }

   if (this.component) {
    offset = this.component.offset();
    left = offset.left;
    if (this.pickerPosition == 'bottom-left' || this.pickerPosition == 'top-left') {
     left += this.component.outerWidth() - this.picker.outerWidth();
    }
   } else {
    offset = this.element.offset();
    left = offset.left;
   }

   var bodyWidth = document.body.clientWidth || window.innerWidth;
   if (left + 220 > bodyWidth) {
    left = bodyWidth - 220;
   }

   /*if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
    top = offset.top - this.picker.outerHeight();
   } else {
    top = offset.top + this.height;
   }*/

   top = top - containerOffset.top + 169;
   left = left - containerOffset.left + 210;

   this.picker.css({
    top:  top,
    left:  left,
    zIndex: this.zIndex
   });
  },

上面就是相關(guān)的源碼，可以看到，注釋了line 527行之后，在后面引用了一個未初始化過的top變量

嗯… 這是一個沒經(jīng)過測試就提交的小BUG…

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: