jQuery Datepicker 플러그인 사용예제 (달력이미지추가)

게시판에서 다음과 같이 예약발행 기능을 추가했다.

예약발행 / 기간발행 2가지의 기능을 추가해서

설정한 예약된 시간에 발행되도록 하는 기능과

지정된 기간동안에만 발행되었다가 해당기간이 끝나면 게시글을 내리는 기능이었다.

어쨌든 날짜를 선택해야 하는 inputbox란에 달력이미지를 추가하고

Datepicker를 사용해 구현하였다.

이미지는 Datepicker 옆에 img를 넣어처리

<input type="text" class="text mr5 ml10" style="width: 100px" name="startDatePicker" id="startDatePicker"><img src="/epboard/user/img/icon_calender.png" id="startDt" style="margin-left:-24px;">

//달력icon클릭시 datepicker실행
$('#startDt').click(function(e) {
	e.preventDefault();
	$("#startDatePicker").focus();
});
$('#endDt').click(function(e) {
	e.preventDefault();
	$("#endDatePicker").focus();
});

//예약발행 달력_시작
$("#startDatePicker").datepicker({
	dateFormat:'yymmdd'
	,showMonthAfterYear : true
	,changeMonth : true
	,changeYear : true
	,numberOfMonths:1
	,dayNamesMin : ['일','월','화','수','목','금','토']
	,monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
	,minDate : -0 //오늘날짜 이후부터만 설정되게
	,onClose:function(selectedDate){
		$('#endDatePicker').datepicker("option","minDate",selectedDate);
	}
    ,beforeShow : function(input){
		var i_offset = $(input).offset();
		setTimeout(function(){
			$("#ui-datepicker-div").css({'top':i_offset.top - 215 , 'bottom' :'' , left : i_offset.left})
		})
    }
});	

//기간발행_끝
$("#endDatePicker").datepicker({
	dateFormat:'yymmdd'
	,showMonthAfterYear : true
	,changeMonth : true
	,changeYear : true
	,numberOfMonths:1
	,dayNamesMin : ['일','월','화','수','목','금','토']
	,monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
	,minDate : -0 //오늘날짜 이후부터만 설정되게
	,onClose:function(selectedDate){
		$('#startDatePicker').datepicker("option","maxDate",selectedDate);
	}
	,beforeShow : function(input){
		var i_offset = $(input).offset();
		setTimeout(function(){
			$("#ui-datepicker-div").css({'top':i_offset.top - 215 , 'bottom' :'' , left : i_offset.left})
		})
    }
});