jquery ui에서 datepicker를 가져와서 조금 수정해서 사용중인데요.

달력 아이콘을 넣었는데 간격이 잘 맞질않아요.

인풋박스랑 아이콘의 높이가 달라요..

css쪽 건들여봐도 오히려 더 이상해지더라구요.

혹시 datepicker에서 아이콘 위치 조절하는 기능이 있나요? 

$(function() {

$( "#datepicker" ).datepicker({

showOn:"button",

buttonImage:"./datepicker.jpg",

buttonImageOnly:true,

dateFormat: 'yy-mm-dd',

changeMonth: true, 

dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],

dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], 

monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],

//이전 날짜 선택 막기

minDate: "0",

//주말 선택 막기

beforeShowDay: function(date){

var day = date.getDay();

return [(day != 0 && day != 6)];

},

onSelect: function (dateText, inst) {

location.replace("./index.php?c_day=" + dateText);

}

});

}); 

<th scope="row" align='center'>날짜</th>

<td><input TYPE="TEXT" readonly style="width:200px;height:30;"  value="<?=$dateText?>" NAME="c_day"  id="datepicker"></td> 

혹시 몰라 css도 첨부할게요.

body{

font-family: 'Nanum Gothic', serif;

}

table.type09 {

    border-collapse: collapse;

    text-align: left;

    line-height: 1.5;

}

table.type09 thead th {

    padding: 1px;

    font-weight: bold;

    vertical-align: top;

    color: #369;

    border-bottom: 3px solid #036;

}

table.type09 tbody th {

    width: 100px;

    padding: 15px;

    font-weight: bold;

    vertical-align: top;

    border-bottom: 1px solid #ccc;

    background: #f3f6f7;

}

table.type09 td {

    width: 250px;

    padding: 15px;

    vertical-align: top;

    border-bottom: 1px solid #ccc;

}