어린왕자와 여우

$.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);