datepicker 버튼 추가(당일, 1주일, 1개월, 3개월)

 

 

 

 

 

 

 

 

 

from 절과 to절이 있는 부분을 datepicker로는 만들수가 없다.

datepicker 달력 하단에 당일, 1주일, 1개월, 3개월 버튼을 넣어서

from절과 to절에 넣도록 했다.

 

function fnDatepickerFromToDateRangeSet(startId, endId, searchFnName){

	$("#"+startId).datepicker( "option", "beforeShow",
			function (input) {
				fnDatepickerRangeSet(input,startId,endId,1,searchFnName);
			}
	);
	
	$("#"+endId).datepicker( "option", "beforeShow", 
			function (input) {
	    		fnDatepickerRangeSet(input,startId,endId,2,searchFnName);
			}
	);
	//버튼 위치 input 안으로 넣도록 함.
	$(".ui-datepicker-trigger").css({"vertical-align": "middle", "cursor": "pointer", "padding-left": "2px"}).addClass("box_date_btn");
	 
}


//하단 당월,1주일,1개월,3개월 버튼 추가 - 함수.
//이 함수 자체는 달력이 보여질때 실행되고 하단 버튼 클릭시는  'click: function' 부분에서 실행됨을 주의!
function fnDatepickerRangeSet(input, startId, endId, startEndChk, searchFnName) {
	setTimeout(function () {
		
		var dateText =  ["당일", "1주일", "1개월", "3개월"];
		var dateRange = ["0d",   "-7d",   "-1m",  "-3m"];
		var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");

		for(i=0;dateText.length > i; i++ ){
			$("<button>", { text: dateText[i], value:dateRange[i], executeFn:searchFnName,
				//하단 버튼을 클릭시에는 여기 'click: function'이 실행된다.
				click: function (eventData) {
					$("#"+startId).datepicker('setDate', eventData.currentTarget.value);
					$("#"+endId).datepicker('setDate', '0d');
					jQuery(input).datepicker('hide');
					var execFn = eventData.currentTarget.getAttribute('executeFn');
					if(execFn){
						 eval(execFn);
					}
					
				}
			}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
		}
		
		//오늘 버튼 숨김
		$(input).datepicker("widget").find(".ui-datepicker-current").hide();

		

	}, 1)
 }