Я витратив смішну кількість часу, намагаючись вирішити цю проблему на кількох сторінках нового веб-сайту, який я розробляю, і нічого, здавалося, не працює (включаючи будь-яке з різних представлених вище рішень, які я реалізував. Я здогадуюсь, що 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());
});
По суті, я прикріплюю новий тег стилю до голови перед кожною подією вибору дати "показати" (видаляючи попередню, якщо вона присутня). Цей метод роботи обходить значну більшість питань, з якими я стикався під час розробки.
Тестовано на Chrome, Firefox, Safari та IE> 8 (оскільки IE8 не дуже добре працює з jsFiddle, і я втрачаю почуття турботи
Я знаю, що це поєднання контекстів jQuery та javascript, але на даний момент я просто не хочу докладати зусиль для перетворення його на jQuery. Це було б просто, я знаю. Я зараз з цією справою закінчився. Сподіваюся, що хтось інший може скористатися цим рішенням.