Я потратил смехотворное количество времени, пытаясь выяснить эту проблему на нескольких страницах нового сайта, который я разрабатываю, и, похоже, ничего не работает (включая любое из представленных выше решений, которые я реализовал. Я предполагаю, что jQuery Я просто достаточно изменил ситуацию, так как им было предложено, чтобы решения больше не работали. Я не знаю. Честно говоря, я не понимаю, почему в интерфейсе jQuery нет чего-то простого, чтобы это настроить, так как Кажется, это довольно большая проблема с календарем, постоянно всплывающим в какой-то позиции на значительном расстоянии от страницы, к которой он прикреплен.
Во всяком случае, я хотел получить конечное решение, которое было бы достаточно универсальным, чтобы я мог использовать его где угодно, и оно будет работать. Кажется, я наконец пришел к выводу, что избегаю некоторых из более сложных и специфичных для jQuery-кода ответов выше:
jsFiddle: http://jsfiddle.net/mu27tLen/
HTML:
<input type="text" class="datePicker" />
JS:
positionDatePicker= function(cssToAdd) {
/* Remove previous positioner */
var oldScript= document.getElementById('datePickerPosition');
if(oldScript) oldScript.parentNode.removeChild(oldScript);
/* Create new positioner */
var newStyle= document.createElement("style");
newStyle.type= 'text/css';
newStyle.setAttribute('id', 'datePickerPostion');
if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
else newStyle.appendChild(document.createTextNode(cssToAdd));
document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
/* Initialize date picker elements */
var dateInputs= jQuery('input.datePicker');
dateInputs.datepicker();
dateInputs.datepicker('option', {
'dateFormat' : 'mm/dd/yy',
'beforeShow' : function(input, inst) {
var bodyRect= document.body.getBoundingClientRect();
var rect= input.getBoundingClientRect();
positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
}
}).datepicker('setDate', new Date());
});
По сути, я прикрепляю новый тег стиля к заголовку перед каждым событием showpicker «show» (удаляя предыдущий, если имеется). Этот метод работы позволяет обойти большинство проблем, с которыми я столкнулся во время разработки.
Протестировано на Chrome, Firefox, Safari и IE> 8 (поскольку IE8 плохо работает с jsFiddle, и я теряю удовольствие от заботы о
Я знаю, что это сочетание контекстов jQuery и javascript, но на данный момент я просто не хочу прилагать усилия для его преобразования в jQuery. Было бы просто, я знаю. Я так закончил с этой штукой прямо сейчас. Надеюсь, кто-то еще может извлечь выгоду из этого решения.