Spędziłem absurdalnie dużo czasu próbując rozwiązać ten problem przez kilka stron nowej witryny, którą tworzę i nic nie wydawało się działać (w tym dowolne z różnych rozwiązań przedstawionych powyżej, które wdrożyłem. Zgaduję, że jQuery właśnie się zmieniło wystarczająco dużo, ponieważ zasugerowano, że rozwiązania już nie działają. Nie wiem. Szczerze mówiąc, nie rozumiem, dlaczego nie ma czegoś prostego zaimplementowanego w interfejsie użytkownika jQuery, aby to skonfigurować, jak się wydaje dość duży problem polegający na tym, że kalendarz zawsze pojawia się w jakimś miejscu znacznie daleko w dół strony od wejścia, do którego jest dołączony.
W każdym razie chciałem rozwiązania końcowego, które byłoby na tyle ogólne, że mógłbym go używać wszędzie i zadziałałoby. Wydaje się, że w końcu doszedłem do wniosku, który pozwala uniknąć niektórych z bardziej skomplikowanych i specyficznych dla kodu jQuery odpowiedzi powyżej:
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());
});
Zasadniczo dołączam nowy tag stylu do głowy przed każdym zdarzeniem „show” datepicker (usuwanie poprzedniego, jeśli jest obecny). Ta metoda robienia rzeczy pozwala obejść większość problemów, które napotkałem podczas programowania.
Testowane na Chrome, Firefox, Safari i IE> 8 (ponieważ IE8 nie działa dobrze z jsFiddle i tracę zamiłowanie do dbania o
Wiem, że jest to mieszanka kontekstów jQuery i javascript, ale w tym momencie po prostu nie chcę wkładać wysiłku w konwersję go do jQuery. Wiem, byłoby proste. Skończyłem z tym teraz. Mam nadzieję, że ktoś inny może skorzystać z tego rozwiązania.