关于bootstrap时间控件datetimepicker的位置错乱问题

Posted 看一场塞北的雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于bootstrap时间控件datetimepicker的位置错乱问题相关的知识,希望对你有一定的参考价值。

 最近遇到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
        });
    },
最后问题解决!!

参考链接:https://github.com/smalot/bootstrap-datetimepicker/issues/363

以上是关于关于bootstrap时间控件datetimepicker的位置错乱问题的主要内容,如果未能解决你的问题,请参考以下文章

C# 公共控件之 dateTimePicker

关于bootstrap--表单控件(disabled表单禁用显示表单验证的样式)

关于datatables和bootstrap插件使用问题

关于bootstrap--表单(水平表单)

关于bootstrap 表单 带有多选下拉列表和kkpager翻页 的传值问题

求一个bootstrap或者jQuery的日历控件