https://www.epain.org/submission/Include/calendar.js

1var Class = {
2	create: function() {
3		return function() {
4			this.initialize.apply(this, arguments);
5		}
6	}
7}
8var sshCalendar = Class.create();
9sshCalendar.prototype = {
10	str_wday: ['일','월','화','수','목','금','토'],
11	now_date: new Date(),
12	limit_st: null,
13	limit_ed: null,
14	defaultYear: null,
15	defaultMonth: null,
16
17	initialize: function(txtObj, calBtn) {
18		var this_s = this;
19		if (!txtObj) { alert("ERROR initialize()"); }
20		else if (txtObj.nodeType!=1) { txtObj = document.getElementById(txtObj); }
21		if (!txtObj) { alert("ERROR initialize()"); }
22		this.txtObj = txtObj;
23		var ifrmId = "sshCalIframe" + Math.floor(Math.random() * 1000000);
24		var calFrame = document.createElement("iframe");
25		this.calFrame = calFrame;
26		with (calFrame) {
27			id = ifrmId; frameBorder = "0"; /* IE */
28		}
29		with (calFrame.style) {
30			width = "200px"; height = "180px"; position = "absolute"; zIndex = "1000"; border = "1px solid #939393";
31		}
32		txtObj.parentNode.insertBefore(calFrame,txtObj);
33
34		var ifrmDoc = calFrame.contentWindow.document;
35		ifrmDoc.open("text/html","replace");
36		ifrmDoc.writeln("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">");
37		ifrmDoc.writeln("<html>");
38		ifrmDoc.writeln("<head>");
39		ifrmDoc.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
40		ifrmDoc.writeln("<title>sshCalendar</title>");
41		ifrmDoc.writeln("<style>");
42
43		// css
44		var ifrmDocStyle = "";
45		ifrmDocStyle += "*{margin:0; font-size:12px; }";
46		ifrmDocStyle += "body{background:#F9F9F9; overflow:hidden;}";
47		ifrmDocStyle += ".sshCalendarMenu {color:black; text-align:center; font-size:12px; padding:3px 0 1px 0}";
48		ifrmDocStyle += "table{border:0; width:100%;}";
49		ifrmDocStyle += "th{font-weight:normal; background:#618BB3; color:white; font-family:돋움,dotum;}";
50		ifrmDocStyle += "th,td{padding:3px;}";
51		ifrmDocStyle += "td{background:#EFEFEF; text-align:center; cursor:pointer; font-family:arial;}";
52		ifrmDocStyle += "td.sun{background:#F9EBE8; color:red;}";
53		ifrmDocStyle += "td.day{background:#E3E3E3; color:black;}";
54		ifrmDocStyle += "td.sat{background:#E9E9F8; color:blue;}";
55		ifrmDocStyle += "td.theday{background:#FF8040; color:white;}";
56		ifrmDocStyle += "td.today{background:#302497; color:white;}";
57		ifrmDocStyle += "td.other{background:#EFEFEF; color:#C0C0C0;}";
58		ifrmDocStyle += "td.disable{background:#EFEFEF; color:#C0C0C0; text-decoration:line-through; cursor:not-allowed;}";
59		ifrmDocStyle += "td.over{background:black; color:white;}";
60		ifrmDoc.writeln(ifrmDocStyle);
61
62		ifrmDoc.writeln("</style>");
63		ifrmDoc.writeln("</head>");
64		ifrmDoc.writeln("<body onselectstart=\"return false\" ondragstart=\"return false\" onMouseDrag=\"false\" oncontextmenu=\"return false\">");
65		ifrmDoc.writeln("</body>");
66		ifrmDoc.writeln("</html>");
67		ifrmDoc.close();
68		this.ifrmDoc = ifrmDoc;
69		this.make_menu();
70		this.cal_date();
71		this.remake_calendar(this.value_date["Y"], this.value_date["m"]);
72		this.hide();
73		calBtn.onclick = function () {
74			this_s.toggle();
75		}
76	},
77	make_menu: function() {
78		var this_s = this;
79		var calLayer = this.ifrmDoc.createElement("DIV");
80		this.calLayer = calLayer;
81		this.ifrmDoc.body.appendChild(calLayer);
82
83		var calMenu = this.ifrmDoc.createElement("DIV");
84		calMenu.className = "sshCalendarMenu";
85		this.calMenu = calMenu;
86
87		var calYear = this.ifrmDoc.createElement("select");
88		var zCnt = 0;
89		for (var z=1900; z<=2040; z++) {
90			calYear.options[zCnt] = new Option(z,z);
91			zCnt++;
92		}
93		calYear.onchange = function() {
94			this_s.remake_calendar(parseInt(this.value), this_s.calMonth.value);
95		}
96		this.calYear = calYear;
97
98		var calYearStr = this.ifrmDoc.createElement("span");
99		calYearStr.innerHTML = "년 &nbsp;";
100
101		var calMonth = this.ifrmDoc.createElement("select");
102		var zCnt = 0;
103		for (var z=1; z<=12; z++) {
104			calMonth.options[zCnt] = new Option(z,z);
105			zCnt++;
106		}
107		calMonth.onchange = function() {
108			this_s.remake_calendar(this_s.calYear.value, this.value);
109		}
110		this.calMonth = calMonth;
111
112		var calMonthStr = this.ifrmDoc.createElement("span");
113		calMonthStr.innerHTML = "월 ";
114
115		// 오늘 날짜로
116		var now_date = this.now_date;

117		var currYear = now_date.getFullYear();
118		var currMonth = now_date.getMonth() + 1;
119		var btnToday = this.ifrmDoc.createElement("input");
120		with (btnToday) { type = "button"; width = "20"; height = "20"; value = "T"; title = "오늘 날짜로"; }
121		with (btnToday.style) { border = "1px solid #000"; padding = "0"; margin = "1px"; cursor = "pointer"; }
122		btnToday.onclick = function() {
123			this_s.remake_calendar(currYear, currMonth);
124		}
125		this.btnToday = btnToday;
126
127		// 지우기
128		var btnDel = this.ifrmDoc.createElement("input");
129		with (btnDel) { type = "button"; width = "20"; height = "20"; value = "D"; title = "삭제"; }
130		with (btnDel.style) { border = "1px solid #000"; padding = "0"; margin = "1px"; cursor = "pointer"; }
131		btnDel.onclick = function() {
132			this_s.txtObj.value = "";
133		}
134		this.btnDel = btnDel;
135
136		// 닫기
137		var btnClose = this.ifrmDoc.createElement("input");
138		with (btnClose) { type = "button"; width = "20"; height = "20"; value = "X"; title = "닫기"; }
139		with (btnClose.style) { border = "1px solid #000"; padding = "0"; margin = "1px"; cursor = "pointer"; }
140		btnClose.onclick = function() {
141			this_s.hide();
142		}
143		this.btnClose = btnClose;
144
145		calMenu.appendChild(calYear);
146		calMenu.appendChild(calYearStr);

147		calMenu.appendChild(calMonth);
148		calMenu.appendChild(calMonthStr);
149		calMenu.appendChild(btnToday);
150		calMenu.appendChild(btnDel);
151		calMenu.appendChild(btnClose);
152		calLayer.appendChild(calMenu);
153
154		var calBody = this.ifrmDoc.createElement("DIV");
155		calLayer.appendChild(calBody);
156		this.calBody = calBody;
157	},
158	remake_menu: function(target) {
159		var this_s = this;
160		this.calMenu.innerHTML = '';
161		var calYear = this.ifrmDoc.createElement("select");
162		var zCnt = 0;
163
164		var yearLimitStart = 1900;
165		var yearLimitEnd = 2040;
166		if (this.limit_st) {
167			var stArr = this.limit_st.split("-");
168			yearLimitStart = parseInt(stArr[0]);
169		}
170		if (this.limit_ed) {
171			var edArr = this.limit_ed.split("-");
172			yearLimitEnd = parseInt(edArr[0]);
173		}
174		for (var z=yearLimitStart; z<=yearLimitEnd; z++) {
175			calYear.options[zCnt] = new Option(z,z);
176			zCnt++;
177		}
178		calYear.onchange = function() {
179			this_s.remake_calendar(parseInt(this.value), this_s.calMonth.value, 'Y');
180		}
181		this.calYear = calYear;
182
183		var calYearStr = this.ifrmDoc.createElement("span");
184		calYearStr.innerHTML = "년 &nbsp;";
185
186		var calMonth = this.ifrmDoc.createElement("select");
187		var zCnt = 0;
188		for (var z=1; z<=12; z++) {
189			calMonth.options[zCnt] = new Option(z,z);
190			zCnt++;
191		}
192		calMonth.onchange = function() {
193			this_s.remake_calendar(this_s.calYear.value, this.value, 'M');
194		}
195		this.calMonth = calMonth;
196
197		var calMonthStr = this.ifrmDoc.createElement("span");
198		calMonthStr.innerHTML = "월 ";
199
200		// 오늘 날짜로
201		var now_date = this.now_date;
202		var currYear = now_date.getFullYear();
203		var currMonth = now_date.getMonth() + 1;
204		var btnToday = this.ifrmDoc.createElement("input");
205		with (btnToday) { type = "button"; width = "20"; height = "20"; value = "T"; title = "오늘 날짜로"; }
206		with (btnToday.style) { border = "1px solid #000"; padding = "0"; margin = "1px"; cursor = "pointer"; }
207		btnToday.onclick = function() {
208			this_s.remake_calendar(currYear, currMonth);
209		}
210		this.btnToday = btnToday;
211
212		// 지우기
213		var btnDel = this.ifrmDoc.createElement("input");
214		with (btnDel) { type = "button"; width = "20"; height = "20"; value = "D"; title = "삭제"; }
215		with (btnDel.style) { border = "1px solid #000"; padding = "0"; margin = "1px"; cursor = "pointer"; }
216		btnDel.onclick = function() {
217			this_s.txtObj.value = "";
218		}
219		this.btnDel = btnDel;
220
221		// 닫기
222		var btnClose = this.ifrmDoc.createElement("input");
223		with (btnClose) { type = "button"; width = "20"; height = "20"; value = "X"; title = "닫기"; }
224		with (btnClose.style) { border = "1px solid #000"; padding = "0"; margin = "1px"; cursor = "pointer"; }
225		btnClose.onclick = function() {
226			this_s.hide();
227		}
228		this.btnClose = btnClose;
229
230		this.calMenu.appendChild(calYear);
231		this.calMenu.appendChild(calYearStr);
232		this.calMenu.appendChild(calMonth);
233		this.calMenu.appendChild(calMonthStr);
234		this.calMenu.appendChild(btnToday);
235		this.calMenu.appendChild(btnDel);
236		this.calMenu.appendChild(btnClose);
237
238		if (target == 'Y') calYear.focus();
239		if (target == 'M') calMonth.focus();
240	},
241	cal_date: function() {
242		var arr = null;
243		var isb = true;
244		if (this.txtObj.value.indexOf('-') != -1) arr = this.txtObj.value.split('-');
245		else if (this.txtObj.value.indexOf('/') != -1) arr = this.txtObj.value.split('/');
246		else if (this.txtObj.value.indexOf(' ') != -1) arr = this.txtObj.value.split(' ');
247		else if (this.txtObj.value.indexOf(',') != -1) arr = this.txtObj.value.split(',');
248		else if (this.txtObj.value.indexOf('.') != -1) arr = this.txtObj.value.split('.');
249
250		if (arr && arr.length == 3) {
251			arr[2] = arr[2].substr(0, 2);
252		} else if (this.txtObj.value.length == 6) {
253			var t = this.txtObj.value.substr(0, 2);
254			t = (t < 50) ? "20" + t : "19" + t;
255			arr = [t, this.txtObj.value.substr(2, 2), this.txtObj.value.substr(4, 2)];
256		} else if (this.txtObj.value.length == 8) {
257			arr = [this.txtObj.value.substr(0, 4), this.txtObj.value.substr(4, 2), this.txtObj.value.substr(6, 2)];
258		} else {
259			var date_now = new Date();
260
261			var nowY = date_now.getFullYear();
262			var nowM = date_now.getMonth() + 1;
263			var defaultY = this.defaultYear;
264			var defaultM = this.defaultMonth;
265
266			if (defaultY != null && defaultM != null) {
267				var theYear = defaultY;
268				var theMonth = defaultM;
269				var theDay = 1;
270			} else if (defaultY != null && defaultM == null) {
271				var theYear = defaultY;
272				var theMonth = 1;
273				var theDay = 1;
274			} else if (defaultY == null && defaultM != null) {

275				var theYear = nowY;
276				var theMonth = defaultM;
277				var theDay = 1;
278			} else {
279				var theYear = nowY;
280				var theMonth = nowM;
281				var theDay = date_now.getDate();
282			}
283			arr = [theYear, theMonth, theDay];
284
285			date_now = null;
286			isb = false;
287		}
288		arr[0] = parseInt(arr[0], 10);
289		arr[1] = parseInt(arr[1], 10);
290		arr[2] = parseInt(arr[2], 10);
291
292		var date_temp = new Date(arr[0], (arr[1] - 1), arr[2], 0, 0, 0);
293		if (isb)	var todate = this.date_todate(date_temp);
294		else var todate = null;
295		this.value_date = {
296			"Y" : date_temp.getFullYear(),
297			"y" : date_temp.getFullYear().toString().substr(2, 2),
298			"m" : (date_temp.getMonth() + 1),
299			"d" : date_temp.getDate(),
300			"U" : date_temp.getTime(),
301			"w" : date_temp.getDay(),
302			"date" : todate
303		};
304	},
305	remake_calendar: function(y, m, v) {
306		if (this.limit_st || this.limit_ed) this.remake_menu(v);
307
308		var this_s = this;
309		var arr = ["0", "0", "0"];
310		this.destroy();
311		var value_date_date = this.value_date["date"];
312		var t = new Date();
313		var now_date_date = this.date_todate(t);
314		t = null;
315		var t = new Date(y, (m - 1), 1);
316		var st_date_U = t.getTime() - (t.getDay() * 86400000);
317		y = t.getFullYear();
318		m = t.getMonth() + 1;
319		t = null;
320		var t = new Date(y, m, 1);
321		var ed_date_U = t.getTime();
322		t = null;
323		this.calYear.value = y;
324		this.calMonth.value = m;
325		var ta = this.ifrmDoc.createElement("table");
326		var tr0 = ta.insertRow(-1);
327		tr0.className = "tr0";
328		for (var i=0; i<7; i++) {
329			var th = this.ifrmDoc.createElement("th");
330			th.innerHTML = this.str_wday[i];
331			tr0.appendChild(th);
332		}
333		var this_date = new Date(st_date_U);
334		var tr_t = null;
335		var ilimit = 60;
336		var fn_select = function() {
337			this_s.event_select_date(this);
338		}
339		while (st_date_U < ed_date_U && ilimit > 0) {
340			tr_t = ta.insertRow(-1);
341			for (var i=0; i<7; i++) {
342				var td = tr_t.insertCell(i);
343				if (i==0) td.className = "sun";
344				else if (i==6) td.className = "sat";
345				else td.className = "day";
346
347				td.title = this.date_todate(this_date);
348				td.innerHTML = this_date.getDate();
349
350				//=== 날짜 제한
351				var validDate = false;
352				if (this.limit_st == null && this.limit_ed == null) validDate = true;
353				else if (this.limit_st == null && td.title <= this.limit_ed) validDate = true;
354				else if (this.limit_ed == null && td.title >= this.limit_st) validDate = true;
355				else if (td.title >= this.limit_st && td.title <= this.limit_ed) validDate = true;
356				else validDate = false;
357
358				if ((this_date.getMonth() + 1) != m) {
359					td.className = "other";
360				} else {
361					if (value_date_date == td.title) {
362						td.className = "theday";
363					} else if (now_date_date == td.title) {
364						td.className = "today";
365					}
366				}
367				if (validDate) {
368					td.onclick = fn_select;
369					td.onmouseover = function() {
370						this.className += " over";
371					}
372					td.onmouseout = function() {
373						this.className = this.className.replace(" over","");
374					}
375				} else {
376					td.className = "disable";
377				}
378
379				ilimit--;
380				st_date_U += 86400000;
381				this_date.setTime(st_date_U);
382			}
383		}
384		this.calBody.appendChild(ta);
385		//this.onmouseevent(ta);
386		this.calFrame.style.width = parseInt(this.calLayer.offsetWidth) + "px";
387		this.calFrame.style.height = parseInt(this.calLayer.offsetHeight) + "px";
388	},
389	date_todate: function(date) {
390		var arr = ["0", "0", "0"];
391		arr[0] = date.getFullYear().toString();
392		arr[1] = (date.getMonth() < 9) ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
393		arr[2] = (date.getDate() < 10) ? "0" + date.getDate().toString() : date.getDate().toString();
394		return arr.join('-');
395	},
396	event_select_date: function(td) {
397		if (td.title) {
398			this.txtObj.value = td.title;
399			this.hide();
400			if (this.txtObj.onchange != null) { this.txtObj.onchange(); }
401		}
402	},
403	toggle: function() {
404		if (this.calFrame.style.display == "none") {
405			this.show();
406		} else {
407			this.hide();
408		}
409		return this.calFrame;
410	},
411	show: function() {
412		this.calFrame.style.display = "";
413		this.cal_date();
414		this.remake_calendar(this.value_date["Y"], this.value_date["m"]);
415		this.calFrame.style.top = parseInt(this.getRealOffsetTop(this.txtObj)) + parseInt(this.txtObj.offsetHeight) + "px";
416		this.calFrame.style.left = parseInt(this.getRealOffsetLeft(this.txtObj)) + "px";
417		return this.calFrame;
418	},
419	hide: function() {
420		this.calFrame.style.display = "none";
421	},
422	destroy: function() {
423		this.calBody.innerHTML = "";
424	},
425	getRealOffsetTop: function (o) {
426		return o ? o.offsetTop + this.getRealOffsetTop(o.offsetParent) : 0;
427	},
428	getRealOffsetLeft: function (o) {
429		return o ? o.offsetLeft + this.getRealOffsetLeft(o.offsetParent) : 0;
430	},
431	set_limit: function(st,ed){	//달력의 선택범위 설정
432		if (st != null) {
433			this.limit_st = st;
434		}
435		if (ed != null) {
436			this.limit_ed = ed;
437		}
438	},
439	set_default: function(y,m){	//달력의 기본 년도/월 선택
440		this.defaultYear = y;
441		this.defaultMonth = m;
442	},
443	unset_limit: function(){	//달력의 선택범위 설정 해제
444		this.limit_st = null;
445		this.limit_ed = null;
446	}
447}
448
449function calInit(className, imgSrc)
450{
451	var rows = document.getElementsByTagName('input');
452	for (var i=0; i<rows.length; i++) {
453		var obj = rows[i];
454		if (obj.type != "text") continue;
455		if (obj.calInitExec == true) continue;
456		var elementClassName = obj.className;
457		if (elementClassName.length == 0) continue;
458		if (elementClassName != className && !elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))) continue;
459		if (obj.maxLength > 255) obj.maxLength = 10;
460
461		if (imgSrc) {
462			var cBtn = document.createElement("img");
463			cBtn.src = imgSrc;
464			cBtn.align = "absmiddle";
465			with (cBtn.style) { cursor = "pointer"; }
466		} else {
467			var cBtn = document.createElement("input");
468			cBtn.value = "달력";
469			cBtn.type = "button";
470			with (cBtn.style) {
471				borderColor = "#b0b0b0";
472				backgroundColor = "#3d3d3d";
473				color = "#ffffff";
474				height = "21px";
475				fontFamily = "dotum";
476				fontSize = "12px";
477				cursor = "pointer";
478			}
479		}
480
481		cBtn.txtObj = obj;
482		cBtn.onmouseover = function() {
483			var calObjLoaded = !!(this.txtObj.calObjLoaded);
484			if (!calObjLoaded) {
485				this.txtObj.calObj = new sshCalendar(this.txtObj, this);
486				this.txtObj.calObjLoaded = true;
487			}
488			var onloadFunction = !!(this.txtObj.onloadFunction && typeof(this.txtObj.onloadFunction) == "function");
489			var onloadFunctionExec = !!(onloadFunction && this.txtObj.onloadFunctionExec);
490			if (onloadFunction && !onloadFunctionExec) {
491				this.txtObj.onloadFunction();
492				this.txtObj.onloadFunctionExec = true;
493			}
494		}
495		if (obj.nextSibling) {
496			obj.parentNode.insertBefore(cBtn, obj.nextSibling);
497		} else {
498			obj.parentNode.appendChild(cBtn);
499		}
500		obj.calInitExec = true;
501	}
502}
503

504function loadCalendar() {
505	calInit("calDate", "https://www.inforang.com/icon/calendar.gif");
506}
507if (window.addEventListener) {
508	window.addEventListener('load', loadCalendar, false);
509} else if (window.attachEvent) {
510	window.attachEvent('onload', loadCalendar);
511}
512
513if (window.removeEventListener) {
514	window.removeEventListener('unload', loadCalendar, false);
515} else if (window.detachEvent) {
516	try {
517		window.detachEvent('onunload', loadCalendar);
518	} catch (e) {}
519}