[스크립트] 달력 3개월치 (alee 님꺼 수정)
인터넷정보2008. 2. 14. 15:50
원본 :
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=48169&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B4%DE%B7%C2&sop=and
필요에 의해서 두어시간만에 급조한거라....
좀 지저분합니다만 혹시나 필요하신 분이 계실까봐 올립니다. (버그가 있을수도 있음)
3항연산자 눈깔 빠지네요... -_-;
깔끔한 소스에 괜히 손댄건 아닌지.....
좋은 소스 공유해주신 alee 님께 감사드립니다....... ^^;;
수정 소스
####################################################
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
var target;
var temp;
var BY;
var BM;
var BD;
function showCalendar(ymd) {
var tmp = ymd.split("-");
var y = parseInt(tmp[0]);
var m = parseInt(tmp[1]);
var d = parseInt(tmp[2]);
var text = '<span style="cursor:pointer;font-size:11px;" onclick="showCalendar(\''+(y-1)+'-'+m+'-'+d+'\')"> ◀◀</span>';
text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(m==1?(y-1)+'-'+12:y+'-'+(m-1))+'-'+d+'\')"> ◀ </span>';
text += '<span style="font-size:13px;font-weight:bold;">[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']</span>';
text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(m==12?(y+1)+'-'+1:y+'-'+(m+1))+'-'+d+'\')"> ▶ </span>';
text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(y+1)+'-'+m+'-'+d+'\')">▶▶</span>';
var text1 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan="7" style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
text1 += y + '년 ' + ((m < 10) ? ('0' + m) : m) + '월';
text1 += '</td>';
var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
+m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;
for (i = 0; i < 42; i++) {
if (i%7==0) text1 += '</tr>\n<tr>';
if((i+1-d1) == BD && m==BM && y==BY){
text1 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m<10?'0'+m:m) +'-'+ ((i+1-d1)<10?('0'+(i+1-d1)):(i+1-d1)) +'\');">' + (i+1-d1) + '</td>';
}else{
if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30)) {
text1 += '<td> </td>';
}else {
text1 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m<10?'0'+m:m) +'-'+ ((i+1-d1)<10?('0'+(i+1-d1)):(i+1-d1)) +'\');">' + (i+1-d1) + '</td>';
}
}
}
text1 += '</tr>\n</table>';
var m1 = m + 1;
var text2 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan=7 style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
text2 += (m==12?(y+1)+'년 ' + '0'+1:y+'년 '+ ((m1<10) ? ('0' + m1) : m1)) + '월';
text2 += '</td>';
var d2 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
+m1*2+(m1*5-m1*5%9)/9-(m1<3?y%4||y%100==0&&y%400?2:3:4))%7;
for (i = 0; i < 42; i++) {
if (i%7==0) text2 += '</tr>\n<tr>';
if((i+1-d2) == BD && m1==BM && y==BY){
text2 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):y)+'-'+((m==12)?'0'+1:m1<10?'0'+m1:m1) +'-' +((i+1-d2)<10?('0'+(i+1-d2)):(i+1-d2))+ '\');">' + (i+1-d2) + '</td>';
}else{
if (i < d2 || i >= d2+(m1*9-m1*9%8)/8%2+(m1==2?y%4||y%100==0&&y%400?28:29:30))
text2 += '<td> </td>';
else
text2 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):y)+'-'+((m==12)?'0'+1:m1<10?'0'+m1:m1) +'-' +((i+1-d2)<10?('0'+(i+1-d2)):(i+1-d2))+ '\');">' + (i+1-d2) + '</td>';
}
}
text2 += '</tr>\n</table>';
var m2 = m + 2;
var text3 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan=7 style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
text3 += (m==12?(y+1)+'년 ' +'0'+2: m==11?(y+1)+'년 ' +'0'+1:y +'년 ' +((m2 < 10) ? ('0' + m2) : m2)) + '월';
text3 += '</td>';
if(m2==14){m2=2; y=y+1;}
var d3 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
+m2*2+(m2*5-m2*5%9)/9-(m2<3?y%4||y%100==0&&y%400?2:3:4))%7;
for (i = 0; i < 42; i++) {
if (i%7==0) text3 += '</tr>\n<tr>';
if((i+1-d3) == BD && m2==BM && y==BY){
text3 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):m==11?(y+1):y)+'-'+ ((m==12)?'0'+2:(m==11)?'0'+1:m2<10?'0'+m2:m2)+'-'+((i+1-d3)<10?('0'+(i+1-d3)):(i+1-d3))+'\');">' + (i+1-d3) + '</td>';
}else{
if (i < d3 || i >= d3+(m2*9-m2*9%8)/8%2+(m2==2?y%4||y%100==0&&y%400?28:29:30))
text3 += '<td> </td>';
else
text3 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m2<10?'0'+m2:m2) +'-'+ ((i+1-d3)<10?('0'+(i+1-d3)):(i+1-d3)) +'\');">' + (i+1-d3) + '</td>';
}
}
text3 += '</tr>\n</table>';
//alert(m+'/'+m1+'/'+m2);
document.getElementById('tt').innerHTML = text;
document.getElementById('calendarDiv1').innerHTML = text1;
document.getElementById('calendarDiv2').innerHTML = text2;
document.getElementById('calendarDiv3').innerHTML = text3;
}
function showCal(obj){
var st = getRealOffsetTop(obj)+20;;
var sl = getRealOffsetLeft(obj);
document.getElementById("calendar").style.top = st;
document.getElementById("calendar").style.left = sl;
document.getElementById("calendar").style.display="block";
target = obj;
temp = target.value.split("-");
BY = parseInt(temp[0]);
BM = parseInt(temp[1]);
if(temp[2].substr(0,1) == "0"){
BD = parseInt(temp[2].substr(1,1));
}else{
BD = parseInt(temp[2]);
}
showCalendar(obj.value);
}
function putDate(d){
target.value = d;
closeCal();
}
function closeCal(){
document.getElementById("calendar").style.display="none";
}
function getRealOffsetTop(o) { return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0; }
function getRealOffsetLeft(o) { return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0; }
//-->
</script>
<style>
.calPop {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
z-index: 2;
top :0px;
left:0px;
display: none;
overflow:hidden;
width: 450px;
height:180px;
color: black;
position: absolute;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<input type="text" name="checkindate" style="cursor:pointer;border:1px solid #EFEFEF;height:18px;font-family:돋움;font-size:12px;color:#666666;" onClick="showCal(document.getElementsByName('checkindate')[0]);" value="2008-03-05" readonly>
<input type="text" name="checkoutdate" style="cursor:pointer;border:1px solid #EFEFEF;height:18px;font-family:돋움;font-size:12px;color:#666666;" onClick="showCal(document.getElementsByName('checkoutdate')[0]);" value="2007-12-10" readonly>
<div id="calendar" class="calPop">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="position: absolute">
<tr>
<td style="position: absolute">
<table cellpadding="0" cellspacing="5" border="0" style="border:1px solid #80BFFF;">
<tr>
<td colspan="3" align="center" id="tt"></td>
<tr>
<td id="calendarDiv1" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
<td id="calendarDiv2" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
<td id="calendarDiv3" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
</tr>
<tr>
<td align="center" colspan="3" style="font-size:11px;font-family:verdana;"><span style="cursor:pointer;font-weight:bold;" onClick="closeCal();">[Close]</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
출처:http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=59369&page=1
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=48169&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B4%DE%B7%C2&sop=and
필요에 의해서 두어시간만에 급조한거라....
좀 지저분합니다만 혹시나 필요하신 분이 계실까봐 올립니다. (버그가 있을수도 있음)
3항연산자 눈깔 빠지네요... -_-;
깔끔한 소스에 괜히 손댄건 아닌지.....
좋은 소스 공유해주신 alee 님께 감사드립니다....... ^^;;
수정 소스
####################################################
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
var target;
var temp;
var BY;
var BM;
var BD;
function showCalendar(ymd) {
var tmp = ymd.split("-");
var y = parseInt(tmp[0]);
var m = parseInt(tmp[1]);
var d = parseInt(tmp[2]);
var text = '<span style="cursor:pointer;font-size:11px;" onclick="showCalendar(\''+(y-1)+'-'+m+'-'+d+'\')"> ◀◀</span>';
text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(m==1?(y-1)+'-'+12:y+'-'+(m-1))+'-'+d+'\')"> ◀ </span>';
text += '<span style="font-size:13px;font-weight:bold;">[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']</span>';
text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(m==12?(y+1)+'-'+1:y+'-'+(m+1))+'-'+d+'\')"> ▶ </span>';
text += '<span style="cursor:pointer;font-size:11px" onclick="showCalendar(\''+(y+1)+'-'+m+'-'+d+'\')">▶▶</span>';
var text1 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan="7" style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
text1 += y + '년 ' + ((m < 10) ? ('0' + m) : m) + '월';
text1 += '</td>';
var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
+m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;
for (i = 0; i < 42; i++) {
if (i%7==0) text1 += '</tr>\n<tr>';
if((i+1-d1) == BD && m==BM && y==BY){
text1 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m<10?'0'+m:m) +'-'+ ((i+1-d1)<10?('0'+(i+1-d1)):(i+1-d1)) +'\');">' + (i+1-d1) + '</td>';
}else{
if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30)) {
text1 += '<td> </td>';
}else {
text1 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m<10?'0'+m:m) +'-'+ ((i+1-d1)<10?('0'+(i+1-d1)):(i+1-d1)) +'\');">' + (i+1-d1) + '</td>';
}
}
}
text1 += '</tr>\n</table>';
var m1 = m + 1;
var text2 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan=7 style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
text2 += (m==12?(y+1)+'년 ' + '0'+1:y+'년 '+ ((m1<10) ? ('0' + m1) : m1)) + '월';
text2 += '</td>';
var d2 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
+m1*2+(m1*5-m1*5%9)/9-(m1<3?y%4||y%100==0&&y%400?2:3:4))%7;
for (i = 0; i < 42; i++) {
if (i%7==0) text2 += '</tr>\n<tr>';
if((i+1-d2) == BD && m1==BM && y==BY){
text2 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):y)+'-'+((m==12)?'0'+1:m1<10?'0'+m1:m1) +'-' +((i+1-d2)<10?('0'+(i+1-d2)):(i+1-d2))+ '\');">' + (i+1-d2) + '</td>';
}else{
if (i < d2 || i >= d2+(m1*9-m1*9%8)/8%2+(m1==2?y%4||y%100==0&&y%400?28:29:30))
text2 += '<td> </td>';
else
text2 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):y)+'-'+((m==12)?'0'+1:m1<10?'0'+m1:m1) +'-' +((i+1-d2)<10?('0'+(i+1-d2)):(i+1-d2))+ '\');">' + (i+1-d2) + '</td>';
}
}
text2 += '</tr>\n</table>';
var m2 = m + 2;
var text3 = '<table cellpadding="2" cellspacing="0" border="0">\n<tr><td colspan=7 style="text-align:center;font-size:12px;font-weight:bold;color:#0080FF;background-color:#DFEFFF;" valign="top">';
text3 += (m==12?(y+1)+'년 ' +'0'+2: m==11?(y+1)+'년 ' +'0'+1:y +'년 ' +((m2 < 10) ? ('0' + m2) : m2)) + '월';
text3 += '</td>';
if(m2==14){m2=2; y=y+1;}
var d3 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400
+m2*2+(m2*5-m2*5%9)/9-(m2<3?y%4||y%100==0&&y%400?2:3:4))%7;
for (i = 0; i < 42; i++) {
if (i%7==0) text3 += '</tr>\n<tr>';
if((i+1-d3) == BD && m2==BM && y==BY){
text3 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-weight:bold;background-color:#FFDFEF;font-family:verdana;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+(m==12?(y+1):m==11?(y+1):y)+'-'+ ((m==12)?'0'+2:(m==11)?'0'+1:m2<10?'0'+m2:m2)+'-'+((i+1-d3)<10?('0'+(i+1-d3)):(i+1-d3))+'\');">' + (i+1-d3) + '</td>';
}else{
if (i < d3 || i >= d3+(m2*9-m2*9%8)/8%2+(m2==2?y%4||y%100==0&&y%400?28:29:30))
text3 += '<td> </td>';
else
text3 += '<td style="font-size:12px;cursor:pointer;text-align:right;font-family:verdana;color:#000000;' + (i%7?'':'color:#FF0000;') +'"'+ ' onClick="putDate(\''+y+'-'+ (m2<10?'0'+m2:m2) +'-'+ ((i+1-d3)<10?('0'+(i+1-d3)):(i+1-d3)) +'\');">' + (i+1-d3) + '</td>';
}
}
text3 += '</tr>\n</table>';
//alert(m+'/'+m1+'/'+m2);
document.getElementById('tt').innerHTML = text;
document.getElementById('calendarDiv1').innerHTML = text1;
document.getElementById('calendarDiv2').innerHTML = text2;
document.getElementById('calendarDiv3').innerHTML = text3;
}
function showCal(obj){
var st = getRealOffsetTop(obj)+20;;
var sl = getRealOffsetLeft(obj);
document.getElementById("calendar").style.top = st;
document.getElementById("calendar").style.left = sl;
document.getElementById("calendar").style.display="block";
target = obj;
temp = target.value.split("-");
BY = parseInt(temp[0]);
BM = parseInt(temp[1]);
if(temp[2].substr(0,1) == "0"){
BD = parseInt(temp[2].substr(1,1));
}else{
BD = parseInt(temp[2]);
}
showCalendar(obj.value);
}
function putDate(d){
target.value = d;
closeCal();
}
function closeCal(){
document.getElementById("calendar").style.display="none";
}
function getRealOffsetTop(o) { return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0; }
function getRealOffsetLeft(o) { return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0; }
//-->
</script>
<style>
.calPop {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
z-index: 2;
top :0px;
left:0px;
display: none;
overflow:hidden;
width: 450px;
height:180px;
color: black;
position: absolute;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<input type="text" name="checkindate" style="cursor:pointer;border:1px solid #EFEFEF;height:18px;font-family:돋움;font-size:12px;color:#666666;" onClick="showCal(document.getElementsByName('checkindate')[0]);" value="2008-03-05" readonly>
<input type="text" name="checkoutdate" style="cursor:pointer;border:1px solid #EFEFEF;height:18px;font-family:돋움;font-size:12px;color:#666666;" onClick="showCal(document.getElementsByName('checkoutdate')[0]);" value="2007-12-10" readonly>
<div id="calendar" class="calPop">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="position: absolute">
<tr>
<td style="position: absolute">
<table cellpadding="0" cellspacing="5" border="0" style="border:1px solid #80BFFF;">
<tr>
<td colspan="3" align="center" id="tt"></td>
<tr>
<td id="calendarDiv1" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
<td id="calendarDiv2" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
<td id="calendarDiv3" style="font-family:verdana;border:1px solid #EFEFEF;" valign="top"></td>
</tr>
<tr>
<td align="center" colspan="3" style="font-size:11px;font-family:verdana;"><span style="cursor:pointer;font-weight:bold;" onClick="closeCal();">[Close]</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
출처:http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=59369&page=1
'인터넷정보' 카테고리의 다른 글
| 양력/음력 간지,절기,띠,국경일,기념일 MySql DB 자료 (0) | 2008.02.16 |
|---|---|
| [함수] URL 관리(Template_ 버젼) (0) | 2008.02.14 |
| 자바스크립트 정규식을 바로 확인할 수 있는 웹 도구들 모음 (0) | 2008.02.14 |
| [PHP함수] 현재 배열이 몇차원 배열인가를 리턴해 줍니다. (0) | 2008.02.14 |
| 즐겨찾기 및 시작페이지 추가 IE FF모두 가능 (0) | 2008.02.14 |
| [보안] php 보안관련 켑챠 (0) | 2008.02.14 |
| [스크립트] 화면상의 객체 위치,크기 (0) | 2008.02.14 |
| [스크립트] 간단한 날짜입력용 자바스크립트 달력입니다. (0) | 2008.02.14 |
| 유용한 온라인 툴(online tool)들 (0) | 2008.02.14 |
| 손상된 DLL파일 구하기 (0) | 2008.02.04 |
