jquery ui datepicker에 position 이슈가 있을때

datepicker가 modal popup안에 있고, 팝업 내에 스크롤이 있는 경우 datepicker 캘린더 위치가 이상해지는 이슈가 있었음.

검색해서 찾은 해결방법!

 

https://aries.me/2020/08/03/jquery-ui-1-12-datepicker-wrong-position-issue-and-fix/

 

구글번역기 돌린것

 

 

1. 위치고정 함수

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. datepicker에 옵션추가

$('#MyDatepicker').datepicker({
	dateFormat: "yy-mm-dd",
	changeMonth: true,
	changeYear: true,
	defaultDate: +0,
	inline: true,
	beforeShow: function (input, inst) { setDatepickerPos(input, inst) },
});