私が開発している新しいサイトのいくつかのページでこの問題を解決するために途方もない時間を費やしましたが、何も機能しないようでした（上で示したさまざまなソリューションを含めて、実装しました。jQueryが変更されたと思います）解決策が機能しないことが示唆されて以来、十分に改善されています。私にはわかりません。正直なところ、これを構成するための単純なものがjQuery uiに実装されていない理由がわかりません。カレンダーのかなり大きな問題で、カレンダーが接続されている入力からページのかなり下の位置に常にポップアップします。
とにかく、私はどこでも使用できて機能するのに十分な汎用性のある最終ソリューションが必要でした。上記のより複雑で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());
});
基本的に、すべてのdatepicker "show"イベントの前に、新しいスタイルタグをヘッドに添付します（存在する場合は、前のイベントを削除します）。この方法で、開発中に遭遇した問題の大部分を回避できます。
Chrome、Firefox、Safari、およびIE> 8でテスト済み（IE8はjsFiddleでうまく機能せず、気にかけることへの熱意を失っています）
これはjQueryとjavascriptコンテキストの混合であることは知っていますが、現時点ではjQueryへの変換に力を入れたくありません。簡単だと思います。私は今、これでこれで終わりです。他の誰かがこのソリューションから利益を得ることができることを願っています。