jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분

 

 

jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분

 

        jQuery("#sdt,#edt").datepicker({
            showMonthAfterYear:true,
            showOn:"button",
            buttonImage:"/common/tbl_st_ca.jpg",
            buttonImageOnly:true,
            dateFormat:'yy-mm-dd',
            nextText:'다음 달',
            prevText:'이전 달',
            dayNamesMin:['일','월','화','수','목','금','토'],
            monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        });

 

 

 

 

 

사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. document site 에서 꼭 확인하세요.

<!-- jquery-ui resource embed start -->

<link  href="resources/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script src="resources/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>

<!-- jquery-ui resource embed end -->
 

$(function() {
        $("#startDate").datepicker(   // inputbox 의 id 가 startDate 이겠죠.
                {dateFormat:'yy/mm/dd' // 만약 2011년 4월 29일 선택하면  inputbox 에 '2011/04/29' 로표시
                 , showOn: 'button' // 우측에 달력 icon 을 보인다.
                 , buttonImage: '/images/Icon_calendar.gif'  // 우측 달력 icon 의 이미지 패스 
                 , buttonImageOnly: true //  inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)
                 , changeMonth: true // 월선택 select box 표시 (기본은 false)
                 ,changeYear: true  // 년선택 selectbox 표시 (기본은 false)
                 ,showButtonPanel: true // 하단 today, done  버튼기능 추가 표시 (기본은 false)
               });

        $("#endDate").datepicker({dateFormat:'yy/mm/dd',showOn: 'button'
                , buttonImage: '/images/Icon_calendar.gif', buttonImageOnly: true
                , changeMonth: true,changeYear: true,showButtonPanel: true});

    });
    
    $('img.ui-datepicker-trigger').attr('align', 'absmiddle'); // css 문제가 있는경우 일부 위치 조절 :)