Question

我想知道如何使bootstrap-datepicker根据其所在的容器自动定位（顶部/底部），并根据视口自动否。

我没有看到这样做的选择，并且js文件似乎很复杂。我不了解它的工作方式。

无论如何，我已经看过它了，这似乎是它根据视口设置方向的部分：

    place: function(){
        if (this.isInline)
            return this;
        var calendarWidth = this.picker.outerWidth(),
            calendarHeight = this.picker.outerHeight(),
            visualPadding = 10,
            container = $(this.o.container),
            windowWidth = container.width(),
            scrollTop = 100,
            appendOffset = container.offset();

        var parentsZindex = [];
        this.element.parents().each(function(){
            var itemZIndex = $(this).css('z-index');
            if (itemZIndex !== 'auto' && itemZIndex !== 0) parentsZindex.push(parseInt(itemZIndex));
        });
        var zIndex = Math.max.apply(Math, parentsZindex) + this.o.zIndexOffset;
        var offset = this.component ? this.component.parent().offset() : this.element.offset();
        var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(false);
        var width = this.component ? this.component.outerWidth(true) : this.element.outerWidth(false);
        var left = offset.left - appendOffset.left,
            top = offset.top - appendOffset.top;

        if (this.o.container !== 'body') {
            top += scrollTop;
        }

        this.picker.removeClass(
            'datepicker-orient-top datepicker-orient-bottom '+
            'datepicker-orient-right datepicker-orient-left'
        );

        if (this.o.orientation.x !== 'auto'){
            this.picker.addClass('datepicker-orient-' + this.o.orientation.x);
            if (this.o.orientation.x === 'right')
                left -= calendarWidth - width;
        }
        // auto x orientation is best-placement: if it crosses a window
        // edge, fudge it sideways
        else {
            if (offset.left < 0) {
                // component is outside the window on the left side. Move it into visible range
                this.picker.addClass('datepicker-orient-left');
                left -= offset.left - visualPadding;
            } else if (left + calendarWidth > windowWidth) {
                // the calendar passes the widow right edge. Align it to component right side
                this.picker.addClass('datepicker-orient-right');
                left += width - calendarWidth+2;
            } else {
                // Default to left
                this.picker.addClass('datepicker-orient-left');
            }
        }

        // auto y orientation is best-situation: top or bottom, no fudging,
        // decision based on which shows more of the calendar
        var yorient = this.o.orientation.y,
            top_overflow;
        if (yorient === 'auto'){
            top_overflow = -scrollTop + top - calendarHeight;
            yorient = top_overflow < 0 ? 'bottom' : 'top';
        }

        this.picker.addClass('datepicker-orient-' + yorient);
        if (yorient === 'top')
            top -= calendarHeight + parseInt(this.picker.css('padding-top'));
        else
            top += height;

        if (this.o.rtl) {
            var right = windowWidth - (left + width);
            this.picker.css({
                top: top,
                right: right,
                zIndex: zIndex
            });
        } else {
            this.picker.css({
                top: top,
                left: left,
                zIndex: zIndex
            });
        }
        return this;
    },

我将“ $（this.o.container）”更改为我的容器（即$（'。container'））。我还尝试用容器替换“ body”。但这是行不通的。

有什么主意我应该如何更改此文件或添加选项以实现所需的功能？

仅供参考：Datepicker附加到表的某些td单元格上。我的约束容器应该是表本身（或表周围的div）。

无论是什么原因，无论出于什么原因，Datepicker都在左右方向上都在视觉上限制在我的表格区域中。当它靠近桌子的底部时，也没关系。当它附加到第一两行时，没关系，因为它们无论如何都离视口的顶部太近（图1）。

但是，当它附加到上方的第三行或第四行时，视口中有足够的空间，因此它只是掩盖了表格上方的我的网站菜单。（图片2）

我希望我的表容器成为引用，以便Datepicker始终在其限制之内。

确定：

不好

谢谢您的帮助。

根据容器的jQuery Bootstrap-datepicker方向

0 个答案: