Tôi đã dành một khoảng thời gian vô lý để tìm ra vấn đề này đối với một số trang của một trang web mới mà tôi đang phát triển và dường như không có gì hoạt động (bao gồm bất kỳ giải pháp nào được trình bày ở trên mà tôi đã triển khai. Tôi đoán jQuery vừa thay đổi mọi thứ đã đủ vì họ được đề xuất rằng các giải pháp không còn hoạt động nữa. Tôi không biết nữa. Thành thật mà nói, tôi không hiểu tại sao không có thứ gì đó đơn giản được triển khai vào jQuery ui để định cấu hình điều này, vì có vẻ như một vấn đề khá lớn với lịch luôn xuất hiện ở một số vị trí rất xa trên trang từ đầu vào mà nó được đính kèm.
Nhưng dù sao, tôi muốn một giải pháp cuối cùng đủ chung để tôi có thể sử dụng nó ở bất cứ đâu và nó sẽ hoạt động. Dường như cuối cùng tôi đã đi đến kết luận tránh một số câu trả lời phức tạp hơn và phức tạp hơn về mã jQuery ở trên:
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());
});
Về cơ bản, tôi đính kèm một thẻ kiểu mới vào phần đầu trước mỗi sự kiện "hiển thị" người chọn ngày (xóa cái trước đó, nếu có). Phương pháp làm việc này giải quyết được phần lớn các vấn đề mà tôi gặp phải trong quá trình phát triển.
Đã thử nghiệm trên Chrome, Firefox, Safari và IE> 8 (vì IE8 không hoạt động tốt với jsFiddle và tôi đang mất hứng thú khi quan tâm đến
Tôi biết rằng đây là sự kết hợp giữa các ngữ cảnh jQuery và javascript, nhưng tại thời điểm này, tôi không muốn chuyển đổi nó sang jQuery. Sẽ đơn giản, tôi biết. Tôi đã hoàn thành việc này ngay bây giờ. Hy vọng ai đó khác có thể hưởng lợi từ giải pháp này.