Seapy's Blog


문제점

jQuery UI 에서 제공하는 DatePicker 를 사용할때 ie 10 미만 버전에서 잘 작동하지만 페이지가 스크롤되는경우 스크롤된 상태에서 DatePicker 를 표시할때 잘못된 위치가 나오는 경우가 있다. 이는 DatePicker 의 문제만은 아니고 jQuery UI 전체적인 문제인것 같다.

전체적인 문제 수정을 위해 checkOffset 함수를 변경하라는글이 있는데 이값이 정확히 어떻게 동작하는지 몰라 나는 아래와 같이 우선 임시방편으로 datePicker 에만 적용했다.
(
checkOffset 함수를 변경하라는 글 http://forum.jquery.com/topic/datepicker-appears-offscreen-when-ie-scrolled-right-ie-only-with-proposed-fix)

해결 방법

jQuery UI 의 소스를 변경.

jquery.ui.js 는 모든 ui 요소들이 전부 합쳐져 있는것이니 여기서 변경하거나 별도로 jquery.ui.datepicker.js 만 변경하는 경우 해당 파일에서 _showDatepicker: 함수를 다음과 같이 변경한다.
(gist 에도 올려두었다. https://gist.github.com/seapy/5699795)

_showDatepicker: function(input) {
      input = input.target || input;
      if (input.nodeName.toLowerCase() !== "input") { // find from button/image trigger
           input = $("input", input.parentNode)[0];
      }
      .... 생략
      // patch start
      if (!$.datepicker._pos) { // position below input
           $.datepicker._pos = $.datepicker._findPos(input);
           $.datepicker._pos[1] += input.offsetHeight; // add the height
           if (/msie [6-9]./.test(navigator.userAgent.toLowerCase())) {
                // IE 6~9 버전에서 스크롤하는경우 위치값을 제대로 판단하지 못하는 오류 수정
                // 브라우저 판단 참고 : http://stackoverflow.com/questions/14512826/impromptu-with-jquery-1-9-error-with-browser-msie
                // jquery 캘린더 위치 오류 참고 : http://stackoverflow.com/questions/2834857/jquery-ui-datepicker-positioning-problem-when-scrolling-down-webpage
                $.datepicker._pos[1] += document.body.scrollTop;
           }
      }
      // patch end

      isFixed = false;
      $(input).parents().each(function() {
           isFixed |= $(this).css("position") === "fixed";
           return !isFixed;
      });
      .... 생략
 },

이게 일괄적으로 적용하면 ie10 에서 잘못된 위치에 나오기 때문에 브라우저 버전 체크가 필요하다.