JQuery UI 1.12 Datepicker wrong position issue (and fix)
jQuery UI 1.12 has a Datepicker component, which renders under the text input box.
In some scenario, when the page is scrolled down, the Datepicker will appear in wrong position. It’s due to the scroll distance not catered.
Fortunately, the Datepicker has a beforeShow properties which accept a function to modify the Datepicker’s height. So we can fix the issue as below
1. Create function to fix the position
function setDatepickerPos(input, inst) {
var rect = input.getBoundingClientRect();
// use 'setTimeout' to prevent effect overridden by other scripts
setTimeout(function () {
var scrollTop = $("body").scrollTop();
inst.dpDiv.css({ top: rect.top + input.offsetHeight + scrollTop });
}, 0);
}
2. Add the function to ‘beforeShow’ properties of Datepicker
$('#MyDatepicker').datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
defaultDate: +0,
inline: true,
beforeShow: function (input, inst) { setDatepickerPos(input, inst) },
});