JavaScript input 날짜를 달력창에서 선택하여 삽입
페이지 정보
본문
### calendar.js 파일 생성 ###
// 새창 띄우기 스크립트
function new_win(filename,p_name,s_width,s_height,s_scrol)
{
x = screen.width;
y = screen.height;
wid = (x / 2) - (s_width / 2);
hei = (y / 2) - (s_height / 2);
//wid =0;
//hei = 0;
window.open(filename, p_name, "toolbar=0,location=0,directories=0,status=0,menubar=0,resizable=0,scrollbars=" + s_scrol + ",width=" + s_width + ",height=" + s_height + ",top=" + hei + ",left=" + wid + ",scrolbar=no");
}
//달력시작
/*
* G calendar v0.5
* (공휴일 및 국경일 체크기능없음)
*
* By 행복한고니(gonom9@empal.com)
*/
var action_global = ""; //action의 전역변수
var now = new Date();
var now_year = now.getFullYear();
var now_month = now.getMonth()+1;
var now_day = now.getDate();
function calendar(action){
cal(now_year,now_month,now_day,action);
}
function cal(year, month, day, action){
var i, j, day_num=1;
var last_week, month_link="";
var calDate = new Date(year, month-1, day_num);
var checkDate = new Date();
var date_array = new Array(6);
for(i=0;i<6;i++) date_array[i] = new Array("","","","","","","");
//스크립트 추출 및 변환, 내용이 없으면 마지막 action 사용
if(action == ""){
script = action_global;
}else{
var script = action;
var action_mode = action.substring(0,3);
if(action_mode.toLowerCase()=="url") script = "document.location.href='"+action.substring(4,action.length)+"'";
action_global = script;
}
for(j=0;j<6;j++){
for(i=0;i<7;i++){
if(j==0 && i==0)i = calDate.getDay();
date_array[j][i]=day_num+"";
day_num++;
//해당 날짜값에 대한 유효성 검사
checkDate.setFullYear(year, month-1, day_num);
if(checkDate.getDate() != day_num) break;
}
if(checkDate.getDate() != day_num) break;
}
last_week = (date_array[5][0])?6:5;
outStr = "<table bgcolor=#CCCCCC width=160 height=160 border=0 cellpadding=0 cellspacing=0 style='border:1 solid black'><tr><td>\n";
outStr += "<table width=100% height=100% border=0 cellpadding=0 cellspacing=1 style='border:1 solid black'>\n";
outStr += "<col width=20 align=center></col><col width=20 align=center></col><col width=20 align=center></col><col width=20 align=center></col><col width=20 align=center></col><col width=20 align=center></col><col width=20 align=center></col>\n";
outStr += "<tr><td class=calendar style='color:red'>S<td class=calendar>M<td class=calendar>T<td class=calendar>W<td class=calendar>T<td class=calendar>F<td class=calendar style='color:blue'>S</tr>\n";
for(j=0;j<last_week;j++){
outStr += "<tr>";
for(i=0;i<7;i++){
//스크립트 자료변환
if(date_array[j][i]!=""){
action_script = script.replace("{y}", year);
action_script = action_script.replace("{m}",(month < 10)?"0"+month:month);
action_script = action_script.replace("{d}", (date_array[j][i]<10)?"0"+date_array[j][i]:date_array[j][i]);
}
else action_script = "";
today=date_array[j][i];
//오늘이면 진하게
if(now_year==year && now_month==month && now_day==today) today="<b>"+today+"</b>";
//날짜별로 스크립트 출력
if(i==0){ outStr += "<td class=calendar style='color:red;cursor:hand' onMouseover=this.style.backgroundColor='#FFEEEE' onMouseout=this.style.backgroundColor='' onClick=\""+action_script+"\">"+today+"</td>"; continue; }
if(i==6){ outStr += "<td class=calendar style='color:blue;cursor:hand' onMouseover=this.style.backgroundColor='#EEEEFF' onMouseout=this.style.backgroundColor='' onClick=\""+action_script+"\">"+today+"</td>"; continue; }
outStr += "<td class=calendar style='cursor:hand' onMouseover=this.style.backgroundColor='#EEEEEE' onMouseout=this.style.backgroundColor='' onClick=\""+action_script+"\">"+today+"</td>";
}
outStr += "</tr>\n";
}
outStr += "</table></td></tr></table>";
month_link = (month > 1)? "<a onClick=\"cal("+year+","+(month-1)+","+day+",'')\" style='text-decoration:none; color:#909090; cursor:hand'>◁</a> <font color=black>"+month:"<a onClick=\"cal("+(year-1)+",12,"+day+",'')\" style='text-decoration:none; color:#909090; cursor:hand'>◁</a> <font color=black>"+month;
month_link += (month < 12)? "</font> <a onClick=\"cal("+year+","+(month+1)+","+day+",'')\" style='text-decoration:none; color:#909090; cursor:hand'>▷</a>":"</font> <a onClick=\"cal("+(year+1)+",1,"+day+",'')\" style='text-decoration:none; color:#909090; cursor:hand'>▷</a>";
//HTML 대입
document.all.G_cal_body.innerHTML = outStr;
document.all.G_cal_year.innerHTML = "<a onClick=\"cal("+(year-1)+","+month+","+day+",'')\" style='text-decoration:none; color:#909090; cursor:hand'>◁</a> <font color=black>"+year+"</font> <a onClick=\"cal("+(year+1)+","+month+","+day+",'')\" style='text-decoration:none; color:#909090; cursor:hand'>▷</a>";
document.all.G_cal_month.innerHTML = month_link;
}
function onoff_Gcal(){
document.all.G_cal.style.top = event.clientY+window.document.body.scrollTop-150;
document.all.G_cal.style.left = event.clientX+window.document.body.scrollLeft-5;
document.all.G_cal.style.visibility = (document.all.G_cal.style.visibility=="hidden")?"":"hidden";
}
document.writeln("<style>td.calendar{font-size:7pt; font-family:tahoma;color:black; background-color:white}</style>");
document.writeln(""
+"<div id=G_cal style='width=160;position:absolute;visibility:hidden'>"
+"<table bgcolor=#EEEEEE width=160 height=25 border=0 cellpadding=3 cellspacing=0 style='border:1 solid black'>"
+" <tr><td align=center style='font-size:8pt; font-family:tahoma'>"
+" <span id=G_cal_year></span><span id=G_cal_month></span>"
+" </td></tr>"
+"</table>"
+"<div id=G_cal_body style='width:160'>"
+"</div></div>");
//달력끝
### write.asp ###
<script type="text/javascript" src="calendar.js"></script>
<form>
<table>
<tr>
<td>시작일</td>
<td><input name="date1" type="text" id="date1" value="<%=date1%>" style="width:80px;" readonly />
<img name="BTS" src="img/btn_calendar.jpg" align="absmiddle" onclick="calendar("form.date1.value='{y}-{m}-{d}';onoff_Gcal();");onoff_Gcal();" />
</td>
</tr>
<tr>
<td>종료일</td>
<td><input name="date2" type="text" id="date2" value="<%=date2%>" style="width:80px;" readonly />
<img name="BTS" src="img/btn_calendar.jpg" align="absmiddle" onclick="calendar("form.date2.value='{y}-{m}-{d}';onoff_Gcal();");onoff_Gcal();" /></td>
</tr>
</table>
</form>
댓글목록
등록된 댓글이 없습니다.