Я хотел бы знать, как я мог бы сделать так, чтобы 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:
Не в порядке
Спасибо за вашу помощь.