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) },
});