JQuery datepicker 이미지버튼 적용 및 스타일적용 -- JQuery





$.datepicker.setDefaults({
    dateFormat         : "yy-mm-dd",
    buttonImageOnly : true,
    buttonText          : "Calendar",
    buttonImage        : "/img/calendar.gif"
});   

$(document).ready(function() {
    $("#fromdate").datepicker({
       maxDate       : "+180D",
       showOn        : both,
       showOptions : {direction: 'horizontal'},
       duration        : 200
   });

   $("img.ui-datepicker-trigger").attr("style", "margin-left:2px; vertical-align:middle; cursor: Pointer;");   
});



추가) 2014.08.21


datepicker가 레이어팝업 등에서 노출될 때 레이어팝업의 z-index가 높아 레이어에 가려질 때가 있다.

위의 구문에서 CSS로 z-index를 조정해주면 IE, 크롬, 오페라 등에서 해결이 된다.


$("img.ui-datepicker-trigger").attr("style", "margin-left:2px; vertical-align:middle; cursor: Pointer;");   

$("#ui-datepicker-div").attr("style", "z-index:9999 !important");


그런데, 파이어폭스에서는 위처럼 해도 레이어에 가려지는 현상이 있는데, CSS를 확인해보니 파이어폭스에서는 위에 지정한 CSS가 반영되나 datepicker를 열때 CSS가 자동으로 변경된다. (버전별로 다를 수 있음)


그래서 datepicker가 열릴 때의 이벤트에서 아래와 같이 CSS를 재조정해주어 해결하였다.


$(".ui-datepicker-trigger").click(function() {

    // datepicker 오픈 전의 CSS를 지정

    var position   = $("#ui-datepicker-div").css("position");
    var top          = $("#ui-datepicker-div").css("top");
    var left          = $("#ui-datepicker-div").css("left");
    var display     = $("#ui-datepicker-div").css("display");


    // datepicker 오픈 시 자동으로 변경되는 CSS 제거

    $("#ui-datepicker-div").css("z-index", "");


    // 자동 지정되었던 CSS를 다시 지정

    $("#ui-datepicker-div").attr("style", "z-index:9999 !important");


    // 저장했던 CSS 다시 지정

    $("#ui-datepicker-div").css("position", position);
    $("#ui-datepicker-div").css("top", top);
    $("#ui-datepicker-div").css("left", left);
    $("#ui-datepicker-div").css("display", display);

});


덧글

  • 방문자 2013/02/21 12:38 # 삭제 답글

    좋은 자료 감사합니다. 달력 이미지 정렬이 안돼서 걱정이었는데,,
    좋은 자료 감사합니다. 정렬 잘 되네요
  • 어린왕자 2013/02/21 13:37 # 답글

    도움이 되셨다니 다행입니다 ^^
  • 궁그매 2016/12/20 12:05 # 삭제 답글

    레이어팝업 height를 50px; 잡아줬는데요..
    datepicker이 안먹히네요..? css가려지는줄 알고 따라서해봤찌만... 아예 나오질 않아요 ㅠㅠ..
    경로를 못잡네요 .ㅠ.ㅠ.ㅠ.ㅠ.ㅠ


    <div id="pop1" style="display:none;">
    <div class="pop01"></div>
    <div class="pop02">
    <div onfocus="this.blur()" style="border:1;background-color:#DBDBDB;width:820px;height:750px;overflow:scroll;">

    <div style="position:absolute;top:5px;right:20px;" >
    <span style="cursor:pointer;font-size:1.5em;color:#000000;" title="닫기" onClick="showHide('pop1',0,''); document.body.className='';"><b>X</b></span>
    </div>

    <div >
    <div id="appendPop" >

    </div>
    </div>
    <div style="position:absolute;bottom:20px;right:30px;" >
    요기에 input있어요
    </div>

    </div>
    </div>
    </div>
댓글 입력 영역