jQuery Bootstrap-datepicker направление в зависимости от контейнера - PullRequest
0 голосов
/ 25 марта 2019

Я хотел бы знать, как я мог бы сделать так, чтобы boottrap-datepicker автоматически ориентировался (вверху / внизу) в соответствии с контейнером, в котором он находится, и НЕ в соответствии с окном просмотра.

IЯ не видел возможности сделать это, и файл 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 всегда находился в его пределах.

ok:

enter image description here

Не в порядке

enter image description here

Спасибо за вашу помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...