﻿/*
 * Input 상자에 달력으로 날짜 넣어주는 소스
 * ========= 구조  ==============================================================================
 * <input type='text' name='date' id='Div_Input'/>  
 * 	//입력박스 : id값을 div의 id값에 '_Input'을 붙인다. 
 * 
 * <input type='button' value='달력' onclick='quickGetCalendar('Div')'/> 
 * 	//달력 가져오는 함수 호출 : 인자값으로 가져온 달력을 넣어줄 Div의 id값을 넣어준다.
 * 
 * <div id='Div' calss='calendar' style='position:absolute;z-index:1;width:200;display:none'></div> 
 * 	//달력이 출력될 Div : 레이어로 페이지에서 띄워주고 화면에 보이지 않게 한다. 
 * 	//class는 같은 페이지에서 여러개를 호출할 때 다른 달력은 보이지 않도록하기 위해 사용됨
 * ===========================================================================================
 */

//환경설정 ======================================================================================



//템플릿

var onmouse_style = "this.style.backgroundColor='#90D9FF';"; //날짜 마우스 오버 스타일


//==============================================================================================

var quickdate = new Date();
var quickToday = new Array();
quickToday['Year']= quickdate.getFullYear();
quickToday['Month']=quickdate.getMonth()+1;
quickToday['Day']= quickdate.getDate();

function quickGetCalendar(Div,Year,Month){
	if($("#"+Div).css("display")=="none"){
		//$(".calendar").css("display","none");
		$("#"+Div).css("display","block");
	}else{
		$("#"+Div).css("display","none");
		return;
	}
	
	if(!Year) Year = quickToday['Year'];
	if(!Month) Month =  quickToday['Month']-1;
	var Day = quickToday['Day'];
	
	quickCalendar(Div,Year,Month,Day);
}

function quickCalendar(Div,Year,Month,Day){

    var tags="<div style='width:200px; background-color:#fff; padding:10px 0 0 10px; text-align:center; height:240px; border:1px #9d9d9d solid;'> "
	 tags+=" <div class='calendarbase' > "; 
	 tags+=" <div class='daytitlecd'> ";
	 tags+=" <span class='icon'><img onclick='quickPreMonth(\""+Div+"\")' class='cursorPointer'  src='http://images.jautour.com/jautour/images/main/comm/icon_cleft.jpg'  /></span> ";
	 tags+=" <span id='"+Div+"_Year'>"+Year+"</span>년 <span id='"+Div+"_Month'>"+(Month+1)+"</span>월 ";
	 tags+=" <span class='icon1'><img  onclick='quickNextMonth(\""+Div+"\")' class='cursorPointer' src='http://images.jautour.com/jautour/images/main/comm/icon_cright.jpg'  /></span> ";
	 tags+=" </div> ";
	 tags+="  <p></p> ";
	 tags+="  <div class='calendarcd'> ";
	 tags+=" 	<table width='190' border='0' cellpadding='0' cellspacing='0'> ";
	 tags+="  <tr> ";
	 tags+=" 	<th>일</td> ";
	 tags+=" 	<th>월</td> ";
	 tags+=" 	<th>화</td> ";
	 tags+=" 	<th>수</td> ";
	 tags+=" 	<th>목</td> ";
	 tags+=" 	<th>금</td> ";
	 tags+=" 	<th>토</td> ";
	 tags+="   </tr> ";
	 tags+="   <tr> ";

	//표시할 년도와 달을 넣어 객체 생성
	var date = new Date();
	date.setFullYear(Year,Month,1);
	
	//Input 상자의 기존 날짜 값 가져오기
	var CurDate = $("#"+Div+"_Input").attr("value");
	if(CurDate==""){ //없으면 오늘 표시
		var CurYear= Year;
		var CurMonth=Month;
		var CurDay= Day;
	}else{
		var CurYear= CurDate.substr(0,4);
		var CurMonth=parseInt(CurDate.substr(5,2)-1);
		var CurDay= CurDate.substr(8,2);
	}
	
	//1일의 요일 가죠오기
	var week = date.getDay();
	
	//1일이되기 전까지 빈 칸 만들기
	for(var i =0; i<week;i++){		
		 tags+=" 	<td bgcolor='#EBEBEB' >&nbsp;</td> ";
	}
	//날짜 만들기
	while(date.getMonth()==Month){
		//다음 줄 만들기
		if(date.getDate()!=1&&date.getDay()==0){
			tags+="</tr>"
			tags+="<tr>";
		}
		
		
		//Input 상자의 기존의 날짜를 표시해 준다.
		if(Year==CurYear && Month == CurMonth && date.getDate()==CurDay){
			var style=" class='current' ";
		}else{
			if(date.getDay()==0){
				var style= " class='sun cursorPointer' ";
			}else if(date.getDay()==6){
				var style= " class='sat cursorPointer' ";
			}else{
				var style= "";
			}
		}
		tags+="<td '"+style+"' onMouseOver=\""+onmouse_style+"\" onMouseOut=\"this.style.backgroundColor=''\"  ><span style='width:100%' class='cursorPointer' onclick=\"quickGetValue('"+Div+"',this);$('#"+Div+"').css('display','none');\">"+date.getDate()+"</span></td> ";
		date.setDate(date.getDate()+1);

		
	}
	
	//달의 끝 날짜 이 후 빈 칸 만들기
	var days=date.getDay();
	if(days!=0){
		var last = 6-days+1;
		for(var i=0;i<last;i++){
			tags+="<td bgcolor='#EBEBEB'>&nbsp;</td>";
		} 
	}
	
	
	 tags+=" </tr>	 ";
	 //하단 오늘 날짜 만들어주기
	var Year = quickToday['Year'];
	var Month = quickToday['Month'];
	var Day = quickToday['Day'];
	if(Month<10)var Month= "0"+Month;
	if(Day<10)var Day= "0"+Day; 
	
	 
	 tags+=" </table> "; 
	 tags+=" <p style=' text-align:right; padding-top:7px;'><img class='cursorPointer' src='http://images.jautour.com/jautour/images/main/comm/calendar_close.gif' onclick=\"$('#"+Div+"').css('display','none');\" /> </p>  ";
	 tags+=" </div>  ";
	 tags+=" </div>  ";
	tags+=" </div>  ";
	
	$("#"+Div).html(tags);
 }

//Input 박스에 날짜 넣어주기
function quickGetValue(Div,_Day){
	var Year= $("#"+Div+"_Year").html();
	var Month=$("#"+Div+"_Month").html();
	var Day= _Day.innerHTML;

	if(Month<10)Month="0"+Month;
	if(Day<10)Day="0"+Day;
	$("#"+Div+"_Input").attr("value",Year+"-"+Month+"-"+Day);
}

//지난달 가져오기
function quickPreMonth(Div){
	var Year= $("#"+Div+"_Year");
	var Month=$("#"+Div+"_Month");
	
	if(Month.html()==1){
		Month.html(12);
		Year.html(parseInt(Year.html())-1);
	}else{
		Month.html(parseInt(Month.html())-1);
	}
	quickCalendar(Div,Year.html(),parseInt(Month.html())-1);
}

//다음달 가져오기
function quickNextMonth(Div){
	var Year= $("#"+Div+"_Year");
	var Month=$("#"+Div+"_Month");
	
	if(Month.html()==12){
		Month.html(1);
		Year.html(parseInt(Year.html())+1);
	}else{
		Month.html(parseInt(Month.html())+1);
	}
	quickCalendar(Div,Year.html(),parseInt(Month.html())-1);
}

