정XC
138
2020-09-09 16:55:38 작성 2020-09-09 17:36:00 수정됨
0
109

Jquery datepicker 잘 아시는분 좀 도와주세요.....


js 단

function bindCalendar(id1, id2, operator){
	var yrRange =(new Date().getFullYear() + 1);
	console.log("7daySearch datepicker");
	$J("#"+id1).click(function(){
		$J("#"+id1).datepicker( "show" );
	});
	
	$J(function() {
		$J( "#"+id1 ).datepicker({
			yearRange: '2011:'+yrRange,
			minDate : new Date(2011, 1 - 1, 1),
			maxDate : 0,
			onClose: function( selectedDate ) {
				var curDate = $J("#"+id1).datepicker('getDate');
				//선택한날짜 + 1달 조회
				var maxDate = new Date(new Date(curDate).setMonth(curDate.getMonth() + 1));
				console.log("maxDate 7daySearch =====> " + maxDate);
				$J("#"+id2).datepicker("option", operator, selectedDate );
				$J("#"+id2).datepicker("option", "minDate", curDate );
				$J("#"+id2).datepicker("option", "maxDate", maxDate );
} }); }); $J(function() { console.log("log id2 innnnn"); console.log(id1); $J( "#"+id2 ).datepicker({ yearRange: '2011:'+yrRange, minDate : new Date(2011, 1 - 1, 1), onClose: function( selectedDate ) { }, }); }); $J("#"+id1).click(function(){ $J( "#"+id1 ).datepicker( "show" ); }); }
function bindCalendarLog2(id1, id2, operator){
	var yrRange =(new Date().getFullYear() + 1);
	$J("#"+id1).click(function(){
		$J("#"+id1).datepicker( "show" );
	});
	
	$J(function() {
		$J( "#"+id1 ).datepicker({
			yearRange: '2011:'+yrRange,
			minDate : new Date(2011, 1 - 1, 1),
			maxDate : 0,
			onClose: function( selectedDate ) {
				var curDate = $J("#"+id1).datepicker('getDate');
				//일주일 조회 로직
				//선택한날짜 + 7일까지 조회
				var stxt = $J("#"+id1).val().split("-");
				stxt[1] = stxt[1] - 1;
				var sdate = new Date(stxt[0], stxt[1], stxt[2]);
				var mdate = new Date(stxt[0], stxt[1], stxt[2]);
				mdate.setDate(sdate.getDate()+6);
				
				$J("#"+id2).datepicker("option", operator, selectedDate );
				$J("#"+id2).datepicker("option", "minDate", curDate );
				$J("#"+id2).datepicker("option", "maxDate", mdate);
    		}
		});
	});
	
	$J(function() {
		console.log("log id2 innnnn");
		console.log(id1);
		$J( "#"+id2 ).datepicker({
			yearRange: '2011:'+yrRange,
			minDate : new Date(2011, 1 - 1, 1),
			onClose: function( selectedDate ) {
    		},
		});
	});
	
	$J("#"+id1).click(function(){
		$J( "#"+id1 ).datepicker( "show" );
	});
}


jsp페이지는 

<input type="text" name="startDate" id="startDate" value="${startDate}" class="input_date" maxlength="10" readOnly="readonly" />
<span class="between">~</span>
<input type="text" name="endDate" id="endDate" value="${endDate}" class="input_date" maxlength="10" readOnly="readonly" />
<input type="radio" name="selectDay" class="input_radio" checked="checked" value="allSearch" />
<span class="radioBtn">조회</span>
<input type="radio" name="selectDay" class="input_radio" value="7daySearch" />
<span class="radioBtn">조회+다운(최대 7일)</span>


실행부는 


$J(document).ready(function(){
	$J("#startDate, #endDate").unbind("click").on("click", function(e){
		console.log("click event ============================================");
		if($J(".input_radio:checked").val() == "7daySearch"){
			bindCalendarLog2("startDate", "endDate", "minDate"); 
		        bindCalendarLog2("endDate", "startDate", "minDate");
                } else {
			console.log("checked allSearch ===============");
 			bindCalendarLog("startDate", "endDate", "minDate");
 			bindCalendarLog("endDate", "startDate", "minDate");
		}
	});
});


UI부분




조회 라디오버튼버튼을 눌렀을 때는 달력이 시작달력 선택 후 끝달력 선택 시 30일만 선택가능하게

조회+다운 라디오버튼을 눌렀을 때는 7일만 선택가능하게 로직을 구현했는데

날짜input박스 마우스클릭 시 콘솔은 찍히는데 달력UI가 안나오고 다른곳클릭하고 다시클릭시에

달력UI가 나오구요


실행부도 조건에 따라서 실행은 되는데 라디오버튼을 변경해도 30일만 선택가능한달력이

노출이되네요

datepicker는 동적구현이 안되는건지....... 아시는분 도와주세요

0
  • 답변 0

  • 로그인을 하시면 답변 을 등록할 수 있습니다.