Saya menghabiskan banyak waktu untuk mencoba mencari tahu masalah ini untuk beberapa halaman situs baru yang saya kembangkan dan sepertinya tidak ada yang berhasil (termasuk salah satu dari berbagai solusi yang disajikan di atas yang saya terapkan. Saya menduga jQuery baru saja berubah semuanya cukup karena mereka disarankan bahwa solusi tidak berfungsi lagi. Saya tidak tahu. Sejujurnya, saya tidak mengerti mengapa tidak ada sesuatu yang sederhana yang diimplementasikan ke dalam jQuery ui untuk mengonfigurasi ini, karena tampaknya masalah yang cukup besar dengan kalender selalu muncul di beberapa posisi jauh di bawah halaman dari masukan yang dilampirkan.
Bagaimanapun, saya menginginkan solusi akhir yang cukup umum sehingga saya dapat menggunakannya di mana saja dan itu akan berhasil. Sepertinya saya akhirnya sampai pada kesimpulan yang menghindari beberapa jawaban yang lebih rumit dan spesifik kode jQuery di atas:
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());
});
Pada dasarnya saya melampirkan tag gaya baru ke kepala sebelum setiap acara "show" datepicker (menghapus yang sebelumnya, jika ada). Metode melakukan sesuatu ini mengatasi sebagian besar masalah yang saya hadapi selama pengembangan.
Diuji di Chrome, Firefox, Safari, dan IE> 8 (karena IE8 tidak bekerja dengan baik dengan jsFiddle dan saya kehilangan semangat untuk memperhatikan
Saya tahu bahwa ini adalah campuran konteks jQuery dan javascript, tetapi pada titik ini saya hanya tidak ingin berusaha mengubahnya menjadi jQuery. Akan sederhana, saya tahu. Aku sudah selesai dengan hal ini sekarang. Semoga orang lain bisa mendapatkan manfaat dari solusi ini.