[jQuery] datepicker z-index 문제 해결 > 기술자료

• 목록

jquery ui로 datepicker 구현 시 datepicker div가 뒤에 나오는 경우가 있다.
ui-datepicker-div에 따로 z-index를 줘도 먹통이다.


1.. jquery ui 수정
jquery ui 1.11.4 기준

jquery-ui.min.js를 사용하는 경우
u=e.datepicker._get(i,"duration"),i.dpDiv.css("z-index",s(e(t))+1)      <-- 이 부분을 검색한 후
u=e.datepicker._get(i,"duration"),i.dpDiv.css("z-index",s(e(t))+9998) <-- 이렇게 변경해준다.

jquery-ui.js​를 사용하는 경우
datepicker_getZindex( $( input ) ) + 1 )
위 부분을 검색 후 똑같이 +1 부분을 수정해주면 해결된다.


2. function 코드 수정
<script>
$(function(){
    $("#datepicker_from, #datepicker_to").datepicker({ 
        changeMonth: true,
        changeYear: true,
        dateFormat: "yymmdd",
        showButtonPanel: true,
        yearRange: "c-99:c+99",
        maxDate: "+365d",
        // datepicker z-index 문제 해결 시작
        beforeShow: function(){
            setTimeout(function(){
                $('.ui-datepicker').css('z-index',9999);
            },0)
        }
        // datepicker z-index 문제 해결 끝
    });
});
</script>


참고자료
https://m.blog.naver.com/kjs_1225/220625774430
https://dreaming5developer.tistory.com/348