最近遇到datetimepicker这个时间控件在加载到网页显示时会发生错乱,具体解决如下:
1、首先我的源代码是从网站下载的:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
采用的源码是:sample in bootstrap v2文件夹下的:
2、考虑到位置错乱问题应该是在
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
});
},
最后问题解决!!
应将其中的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/363