J'ai passé un temps ridicule à essayer de résoudre ce problème pour plusieurs pages d'un nouveau site que je développe et rien ne semblait fonctionner (y compris les différentes solutions présentées ci-dessus que j'ai implémentées. Je suppose que jQuery vient de changer les choses se sont suffisamment améliorées depuis qu'on leur a suggéré que les solutions ne fonctionnent plus. Je ne sais pas. Honnêtement, je ne comprends pas pourquoi il n'y a pas quelque chose de simple implémenté dans l'interface utilisateur jQuery pour configurer cela, comme cela semble être un problème assez important avec le calendrier qui apparaît toujours à une certaine position considérablement en bas de la page à partir de l'entrée à laquelle il est attaché.
Quoi qu'il en soit, je voulais une solution finale suffisamment générique pour pouvoir l'utiliser n'importe où et cela fonctionnerait. Il me semble être enfin arrivé à une conclusion qui évite certaines des réponses les plus compliquées et spécifiques au code jQuery ci-dessus:
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());
});
Essentiellement, j'attache une nouvelle balise de style à la tête avant chaque événement "show" de datepicker (en supprimant le précédent, s'il est présent). Cette méthode permet de contourner une grande majorité des problèmes que j'ai rencontrés pendant le développement.
Testé sur Chrome, Firefox, Safari et IE> 8 (car IE8 ne fonctionne pas bien avec jsFiddle et je perds le goût de me soucier de
Je sais qu'il s'agit d'un mélange de contextes jQuery et javascript, mais à ce stade, je ne veux tout simplement pas faire l'effort de le convertir en jQuery. Ce serait simple, je sais. J'en ai tellement fini avec cette chose en ce moment. J'espère que quelqu'un d'autre pourra bénéficier de cette solution.