https://gyotong.org/lib/js/calendar.js

1/*
2*	2010.09.30 make by ahmax([email protected])
3*	http://beans9.tistory.com
4*/
5// 최대연수 (0으로 할경우 현제 년도까지)
6var cal_max_year = 2020;			
7// 최소연수
8var cal_min_year = 2005;
9
10// 날짜표시형식 (xxxx-xx-xx)
11var date_split_format = "-";
12
13// 요일표시
14var yoil = ["월","화","수","목","금","토","일"];
15
16// 각 월의 일수
17var mon = [31,28,31,30,31,30,31,31,30,31,30,31];
18			
19var todayStr  = dateStr(new Date(),1);			
20var firstFlag = true;
21var firstId   = "";
22
23function initCal2_arr(obj, _cal_label){
24	var pp  = obj.previousSibling;
25	//alert(pp.getAttribute('id'));
26	initCal2(pp.getAttribute('id'), _cal_label);
27}
28
29//function initCal2(target,type){
30function initCal2(target, _cal_label){
31	var id = target + "Cal";
32	var img_id = "img" + target;
33	var cal_label = _cal_label;
34	$(function(){		
35		var tInput  = $("#" + target).offset();
36		var tHeight = $("#" + target).outerHeight();
37		
38		// 입력값이 있을경우 달력초기화시 해당 입력달에 날짜로 셋팅
39		var targetVal = $("#" + target).val();		
40		if( targetVal == "") targetVal = todayStr;
41		
42		$(document.body).append($("<div id='"+ id +"' onselectstart='return false'></div>"));
43		$(document).click(function(event){
44			if(event.target.id != img_id && event.target.id != id && event.target.id != target && $("#" + id).css('display') != "none" ){
45//alert('hide' + id);
46				$("#" + id).hide();
47			};
48		});;
49		
50		
51		$("#" + id).addClass("divBody");
52		$("#" + id).html(makeCal(id, targetVal, cal_label));
53		$("#" + id).click(function(e){
54			e.stopPropagation();
55		});
56		
57		// 중첩버그 있음.
58		if(firstFlag == true || firstId.indexOf(id) == -1){
59			$("#" + id).mousewheel(function(e, d){			
60				if (d > 0) {moveDate(id, 1, cal_label);}
61				else {	moveDate(id, -1, cal_label); }
62				addHover(id,target);
63			});
64			
65			firstFlag = false;
66			firstId += id;
67		}
68
69		//$("#" + target).attr("readonly", true);
70		//$("#img" + target).click(function(e){
71			calPosition(target,id);
72			$("#" + id).show();
73		//});	
74		
75		//$("#" + id + "_calYear").attr("value",targetVal.split(date_split_format)[0]);
76		$("#" + id + "_calYear").val(targetVal.split(date_split_format)[0]);
77		$("#" + id + "_calYear").change(function(){		
78			changeCal(id,target,cal_label);
79		}).keyup(function(){
80			changeCal(id,target,cal_label);
81		}).mousewheel(function(e, d){			
82			this.blur();
83		});
84		
85		//$("#" + id + "_calMon").attr("value",eval(targetVal.split(date_split_format)[1]));
86		$("#" + id + "_calMon").val(eval(targetVal.split(date_split_format)[1]));
87		$("#" + id + "_calMon").change(function(){
88			changeCal(id,target,cal_label);
89		}).keyup(function(){									
90			changeCal(id,target,cal_label);
91		}).mousewheel(function(e, d){			
92			this.blur();
93		});
94		
95		addHover(id,target);
96			
97		$("#" + id + "_left").click(function(e){
98			moveDate(id,-1, cal_label);
99			addHover(id,target);
100			this.blur();
101		});
102		
103		$("#" + id + "_right").click(function(e){
104			moveDate(id,1, cal_label);
105			addHover(id,target);
106			this.blur();					
107		});
108		
109		$("#" + id + "tBtn").addClass("tBtn");
110		$("#" + id + "tBox").hover(function(){
111			$(this).addClass("tBtnOn");
112		},function(){
113			$(this).removeClass("tBtnOn");
114		}).click(function(){
115			changeToday(id,target,cal_label);
116		});
117		
118		$(window).resize(function() {
119			calPosition(target,id);
120		});
121	});
122}
123
124function calPosition(target,id){
125	var tInput  = $("#" + target).offset();
126	var tHeight = $("#" + target).outerHeight();
127	
128	var calHeight 	= $("#" + id).outerHeight();
129	
130	if( tInput != null){
131		$("#" + id).css({"top":tInput.top+tHeight , "left":tInput.left});
132	}
133	//$("#" + id).css({'top':tInput.top-calHeight , 'left':tInput.left});
134}
135
136function addHover(id,target){
137	$(function(){		
138		$("#" + id + "_cal div[value]").hover(function(){
139			$(this).addClass("onDay");
140		},function(){
141			$(this).removeClass("onDay");
142		}).click(function(e){
143			//$("#" + target).attr("value", $(this).attr("value"));
144			$("#" + target).val($(this).attr("value"));
145			$("#" + id).hide();
146			$("#" + id + " .selDay").removeClass("selDay");
147			$(this).addClass("selDay");
148		});
149		
150		$("#" + id + "_cal [day='0']").addClass("daySun");
151		$("#" + id + "_cal [day='6']").addClass("daySat");
152		for(var i=1;i<6;i++) $("#" + id + "_cal [day='" + i + "']").addClass("dayEv");
153		$("#" + id + "_cal [value='"+$("#"+target).val() +"']").addClass("selDay");
154		$("#" + id + "_cal [value='"+ todayStr + "']").addClass("dayToday");
155	});
156}
157
158function changeCal(id,target,cal_label){
159	//$("#" + id + "_cal").html(makeDate($("#" + id + "_calYear").val(),($("#" + id + "_calMon").val()-1)),id);
160	$("#" + id + "_cal").html(makeDate($("#" + id + "_calYear").val(), ($("#" + id + "_calMon").val()-1),id,cal_label) );
161	addHover(id,target);
162}
163
164function changeToday(id,target, cal_label){
165	var today =  dateStr(new Date(),2);
166	$("#" + id + "_cal").html(makeDate(today[0],eval(today[1]-1)),id, cal_label);
167	//$("#" + id + "_calMon").attr("value",eval(today[1]));
168	$("#" + id + "_calMon").val(eval(today[1]));
169	//$("#" + id + "_calYear").attr("value",today[0]);
170	$("#" + id + "_calYear").val(today[0]);
171	addHover(id,target);
172}
173
174function makeCal(id, tValue, cal_label) {
175	 var today;
176	 var cal_html = "";
177	 
178	 var tDate = tValue.split(date_split_format);
179	 

180	 // 윤년이면 2월 날수를 29로...
181	 if ((tDate[0] % 4 == 0 && tDate[0] % 100 != 0) || tDate[0] % 400 == 0) mon[1] = 29;
182	
183	 cal_html += "<table width='100%'><tr><td><div class='divHead'><table class='calCss'><tr><td id='"+ id +"_left' class='divHeadLeft'>◀</td><td class='divHeadCenter'><select id='"+id+"_calYear' title='년도 선택'>";
184	
185	 if( cal_max_year == 0) cal_max_year = tDate[0];				 
186	 cal_max_year = parseInt(tDate[0], 10) + 20;
187	 cal_min_year = parseInt(tDate[0], 10) - 100;
188	 for(var i=cal_min_year;i<=cal_max_year;i++){	
189		if (i == parseInt(tDate[0], 10))
190			cal_html += "<option value='"+i+"' selected='selected'>" + i + "</option>"; 
191		else
192			cal_html += "<option value='"+i+"'>" + i + "</option>"; 
193	 }
194	 cal_html += "</select><select id='"+id+"_calMon' style='width:60px' title='월 선택'>";
195	 for(var i=1;i<13;i++) { 	
196		if (i == parseInt(tDate[1], 10))
197			cal_html += "<option value='"+ i +"' selected='selected'>" + i +"월</option>"; 
198		else
199			cal_html += "<option value='"+ i +"'>" + i +"월</option>"; 
200	}
201	 cal_html += "</select></td><td id='"+ id +"_right' class='divHeadRigth'>▶</td></tr></table></div></td></tr><tr><td><div id='" + id + "_cal" + "'>";
202		
203	 cal_html += makeDate(eval(tDate[0]),eval(tDate[1]-1),id,cal_label);	
204	 cal_html +="</div></td></tr></table></div>";
205	 // 하단 today 삭제
206	 //cal_html +="</div></td></tr></table></div><div id='"+id+"tBtn'><span id='"+id+"tBox'>Today</span></div>";
207
208	 return cal_html;	 
209}
210
211function makeDate(year,month,id, cal_label){
212	var cal_html = "<table class='calCss'><caption>" +cal_label+ " 선택 달력 – 월, 화, 수, 목, 금, 토, 일 순서로 구성</caption><thead><tr>";
213
214	 // 요일 출력하기.
215	for (i=0;i<yoil.length;i++){ cal_html += "<th scope='col' class='yoil'>" +yoil[i]+ "</th>";	}
216
217	cal_html += "</thead>";
218
219	day = new Date(year,month,1);
220
221	// 달력 처음이 일요일이 아니면 회색으로 채움.
222	if (day.getDay() != 1) {
223		var startDay = day.getMonth() == 0? 0: eval(day.getMonth()-1);
224		var maxDay = day.getDay() == 0 ? 6 : eval(day.getDay()-1);
225		
226		cal_html +="<tr>";
227		for (i=maxDay;i>0;i--){
228			cal_html +="<td><div value='" + dateStr(new Date(year,eval(day.getMonth()-1),(mon[startDay] - (i-1))),1)+"' class = 'dayOther'>" + (mon[startDay] - (i-1))+ "</div></td>";
229		}
230	}	
231	
232	// 날짜를 그려준다.
233	for (i=1;i<=mon[day.getMonth()];i++){		
234		today 		= new Date(year,month,i); // 오늘 날짜를 얻음 -> 요일을 알기 위해서.
235		// 일요일이면 다음 줄로 넘어감.
236		if (today.getDay() == 1){ cal_html +="<tr>"; }
237		cal_html += "<td><div value='" + dateStr(today,1) +"' day='" + today.getDay() +"' >" + i + "</div></td>";
238	}
239	
240	 // 테이블의 나머지를 회색으로 채움.
241	 var next_day = 1;
242	 for (i=today.getDay()-1;i<6;i++){
243		 if(today.getDay() == 0) break;
244		 cal_html +="<td><div value='" + dateStr(new Date(year,eval(day.getMonth()+1),next_day),1)+"' class='dayOther'>" + next_day++ + "</div></td>";		 
245	 }	
246	 
247	 return cal_html;
248}
249
250function moveDate(id,plus, cal_label){	
251	var month = eval($("#" + id + "_calMon").val());
252	var year  = eval($("#" + id + "_calYear").val());
253	month += plus;
254
255	if( month == 0){
256		month = 12;
257		year  += plus;
258	}else if(month == 13){
259		month = 1;
260		year  += plus;
261	}
262	
263	if( cal_max_year == 0) cal_max_year = todayStr.split(date_split_format)[0] ;
264	if( year < cal_min_year || year > cal_max_year ) return;
265
266	//$("#" + id + "_calMon").attr("value",month);
267	$("#" + id + "_calMon").val(month);
268	//$("#" + id + "_calYear").attr("value",year);
269	$("#" + id + "_calYear").val(year);
270	$("#" + id + "_cal").html(makeDate(year,month-1,id, cal_label));
271}
272
273	
274function dateStr( obj, returnType){
275	var y = obj.getFullYear();
276	var m = obj.getMonth()+ 1 + "";
277	var d = obj.getDate() + "";
278	
279	if(m.length == 1) m = "0" + m;
280	if(d.length == 1) d = "0" + d;
281	
282	var returnValue = y+ date_split_format + m + date_split_format +d; 
283	
284	if( returnType == "1"){
285		return returnValue;
286	}else if( returnType == "2"){
287		return 	returnValue.split(date_split_format);	
288	}
289}