最近遇到datetimepicker這個時間控件在加載到網頁顯示時會發生錯亂,具體解決以下:
一、首先個人源代碼是從網站下載的:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
採用的源碼是:sample in bootstrap v2文件夾下的:css
二、考慮到位置錯亂問題應該是在 js文件中,經過查找最終肯定在bootstrap-datetimepicker.js中的問題:
應將其中的place:代碼修改以下:
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;
}
if(left+220 > document.body.clientWidth){
left = document.body.clientWidth-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;
left = left - containerOffset.left;
if(this.container != 'body') top = top + document.body.scrollTop
this.picker.css({
top: top,
left: left,
zIndex: this.zIndex
});
},
最後問題解決!!
參考連接:https://github.com/smalot/bootstrap-datetimepicker/issues/363git