Ho passato una quantità ridicola di tempo cercando di capire questo problema per diverse pagine di un nuovo sito che sto sviluppando e nulla sembrava funzionare (comprese le varie soluzioni presentate sopra che ho implementato. Immagino che jQuery sia appena cambiato abbastanza da quando è stato suggerito che le soluzioni non funzionano più. Non lo so. Onestamente, non capisco perché non c'è qualcosa di semplice implementato nell'interfaccia utente di jQuery per configurarlo, come sembra un problema abbastanza grande con il calendario che si apre sempre in una posizione considerevolmente più in basso nella pagina dall'input a cui è allegato.
Comunque, volevo una soluzione finale che fosse abbastanza generica da poterla usare ovunque e avrebbe funzionato. Mi sembra di essere finalmente giunto a una conclusione che evita alcune delle risposte più complicate e specifiche del codice jQuery sopra:
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());
});
Essenzialmente allego un nuovo tag di stile in testa prima di ogni evento "show" di datepicker (cancellando il precedente, se presente). Questo metodo di esecuzione aggira la maggior parte dei problemi che ho riscontrato durante lo sviluppo.
Testato su Chrome, Firefox, Safari e IE> 8 (poiché IE8 non funziona bene con jsFiddle e sto perdendo il mio gusto per
So che questo è un mix di contesti jQuery e javascript, ma a questo punto non voglio impegnarmi per convertirlo in jQuery. Sarebbe semplice, lo so. Ho così chiuso con questa cosa adesso. Spero che qualcun altro possa trarre vantaggio da questa soluzione.