인터넷정보

쇼핑몰이나 여행사의 검색에서 쓸수있는 달력

알 수 없는 사용자 2007. 10. 18. 14:06
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<script>

        var old='';
        function view(name,flag){

                if(flag == 'first')
                {
                calStr.style.pixelTop = img1.offsetTop + 30;
                calStr.style.pixelLeft = img1.offsetLeft;

                show_cal('',calStr,'first');
                }
                else
                {
                calStr.style.pixelTop = img2.offsetTop + 30;
                calStr.style.pixelLeft = img2.offsetLeft;

                show_cal('',calStr,'last');
                }

                submenu=eval(name+".style");

                if(old!=submenu)
                {
                        if(old!='')
                        {
                                old.visibility='hidden';
                        }
                        submenu.visibility='visible';
                        old=submenu;
                }
                else
                {
                        submenu.visibility='hidden';
                        old='';
                }
        }

        function insert(str1,str2,str3,str4){
                if(str4 == 'first'){
                        document.date.m_year.value = str1;
                        document.date.m_month.value = str2;
                        document.date.m_day.value = str3;
                       
                        calStr.style.visibility='hidden';
                        old='';
                }
                else
                {
                        document.date.n_year.value = str1;
                        document.date.n_month.value = str2;
                        document.date.n_day.value = str3;
                       
                        calStr.style.visibility='hidden';
                        old='';

                }
        }
</script>
</head>
<body>
<form name=date>
<input type=text name=m_year size=4>년
<input type=text name=m_month size=2>월
<input type=text name=m_day size=2>일
[<a href="javascript:view('calStr','first')" name=img1>검색</a>]부터
<input type=text name=n_year size=4>년
<input type=text name=n_month size=2>월
<input type=text name=n_day size=2>일
[<a href="javascript:view('calStr','last')" name=img2>검색</a>]까지</form>
<br>
<div id=calStr style='position:absolute; top:50; left:150; visibility:hidden; width:; z-index:1 ;'></div>
<script language="JavaScript">
<!--

//자바함수 라이브러리에 추가했으면 하는 함수덜..
function lpad(str,fill,leng)
{
    var n = leng - str.length;
    var out ="";
    for (i =0; i < n; i++)  out = out + fill;
    out=out+str;
    return out;
}
//parseInt에서는 '08'을 8진수로 인식해서 0이나 NaN을 돌려준다
function toInt(str)
{
    i=0;
    while(1)
    {
        if(str.substr(0,1)=='0') {str=str.substr(1,str.length)};
        else break;
        i++;
    }
    return parseInt(str);
}

//정훈이(sizers)와 함께 달력소스 후루꾸로 뱃기기.. ㅋㅋ


//기념일에 해당하는 배열 전역변수(이는 서버사이드에서 동적으로 생성시켜줘야함);
//알아서 적용시킬것...
//var anniversary = new Array(3,7,9,23,25);

function show_cal(selectDate,calDivObj,flag) //selectDate이슈가 되는 날짜, calDivObj달력을 뿌릴 DIV태그 아이디
{
    //전역변수들 세팅
    var selectDate = ''+selectDate; //전역변수1 - 이슈가 되는 날짜 지정
    today = new Date();
    toDate = today.getYear() + lpad(''+(today.getMonth()+1),'0',2) + lpad(''+today.getDate(),'0',2); // 오늘날짜 지정
    //alert(toDate);
    if (selectDate == '')
    {
        selectDate=toDate;
    }

    var preMonDate;
    var nextMonDate;
    preMonDate= selectDate.substr(0,4)+lpad(''+(toInt(selectDate.substr(4,2))-1),'0',2)+selectDate.substr(6,2);
    nextMonDate= selectDate.substr(0,4)+lpad(''+(toInt(selectDate.substr(4,2))+1),'0',2)+selectDate.substr(6,2);
    //alert(selectDate+":"+ preMonDate +":"+ nextMonDate);
    if(selectDate.substr(4,2)=='01') preMonDate= (toInt(selectDate.substr(0,4))-1) + '12' + selectDate.substr(6,2);
    if(selectDate.substr(4,2)=='12') nextMonDate= (toInt(selectDate.substr(0,4))+1) + '01' + selectDate.substr(6,2);

    //alert(selectDate+":"+ preMonDate +":"+ nextMonDate);

    var firstDay = getFirstDay(selectDate.substr(0,4), selectDate.substr(4,2));            // 첫번째 요일의 숫자값        
    var lastDay = getLastDay(selectDate.substr(0,4), selectDate.substr(4,2));            // 마지막 요일의 숫자값
    var daysOfMonth = getDaysOfMonth(selectDate.substr(0,4), selectDate.substr(4,2));    // 28, 29, 30, 31 중 하나
    //alert(firstDay+":"+ lastDay +":"+ daysOfMonth);
    var calString;//달력 HTML을 저장하기 위한 변수다.
    calString="<table bgcolor=#ffffff border='0' cellspacing='0' cellpadding='0' style='font-size:11px'>";

    calString+="<tr style='color=#0000C6'><td colspan='7' align=center>";
    calString+="<a href=\"javascript:show_cal('"+ (parseInt(selectDate.substr(0,4))-1)+ selectDate.substr(4,4) +"',"+ calDivObj.id +");\">◀◀</a> ";
    calString+="<a href=\"javascript:show_cal('"+ preMonDate +"',"+ calDivObj.id +");\">◀</a> ";
    calString+="<font size='2'><b>"+selectDate.substr(0,4)+"<font color='#FF6600'>"+selectDate.substr(4,2)+"</font></b></font> ";
    calString+="<a href=\"javascript:show_cal('"+ nextMonDate +"',"+ calDivObj.id +");\">▶</a> ";
    calString+="<a href=\"javascript:show_cal('"+ (parseInt(selectDate.substr(0,4))+1)+ selectDate.substr(4,4) +"',"+ calDivObj.id +");\">▶▶</a>";
    calString+="</td></tr>";

    calString+="<tr height='5'><td colspan='7'></td></tr>";
    calString+="<tr height=19>";
    calString+="<td width='19' align=center style='color=#C60000'>일</td>";
    calString+="<td width='19' align=center>월</td>";
    calString+="<td width='19' align=center>화</td>";
    calString+="<td width='19' align=center>수</td>";
    calString+="<td width='19' align=center>목</td>";
    calString+="<td width='19' align=center>금</td>";
    calString+="<td width='19' align=center style='color=#0000C6'>토</td>";
    calString+="</tr>";
   
    // 달력 textfield 출력
    for (var i=0; i < Math.ceil( (firstDay+daysOfMonth)/7 ); i++) {
        calString+="<tr valign='middle' height='19'>";
        for (var j=1; j <= 7; j++) {        
            colNum=i*7+j; //달력의 각 칸의 칼럼을 번호로 지정
           
            if (colNum>firstDay && colNum<firstDay+daysOfMonth+1) //달력에 날짜가 나와야 되는 조건
            {
                thisDay=colNum-firstDay; //이날의 날짜(숫자)
               
                //요일의 색깔을 결정하자 ㅋㅋ
                if(colNum%7==1) {tdColor="C60000";}
                else if(colNum%7==0) {tdColor="0000C6";}
                else {tdColor="333333";}
               
                //기념일일 경우에 링크를 걸어주자..  ㅋㅋ 스타일을 않걸었더니 색깔이 파란색으로@@;; 스타일도 알아서..
                /*
                                for(k=0;k<anniversary.length;k++)
                {
                    if(thisDay==anniversary[k])
                    {
                        thisDay="<a href='http://어디로 갈까.. ㅠ.ㅠ;;'><b>"+thisDay+"</b></a>";
                        break;
                    }
                }
                                */
                                /*
                                년도 : selectDate.substr(0,4)
                                달 : selectDate.substr(4,2)
                                날짜 : thisDay
                                */
                                calString+="<td align=center><a href=\"javascript:insert('"+selectDate.substr(0,4)+"','"+selectDate.substr(4,2)+"','"+thisDay+"','"+flag+"')\">"+thisDay+"</a></td>";
                //calString+="<td align='center' onClick='' style='color=#"+tdColor+"' onMouseOver=this.style.background='#e4e4e4'; onMouseOut=this.style.background='#ffffff';>"+"<a href=view.php?year="+selectDate.substr(0,4)+"&month="+selectDate.substr(4,2)+"&day="+thisDay+">"+thisDay+"</a></td>";
            }
            else
            {
                calString+="<td></td>";
            }
            //calString+="<td>"+colNum+"</td>";
        }
        calString+="</tr>";
    }
    calString+="</table>";

    //저장된 스트링변수를 DIV레이어에 올리자..
    calDivObj.innerHTML=calString;
}

/////////////////////////날짜 관련된 연산 함수들////////////////////////////
function getDaysOfMonth(year, month) {
    var DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];        // Non-Leap year Month days..
    var lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    // Leap year Month days..
    /*
    Check for leap year ..
    1.Years evenly divisible by four are normally leap years, except for...
    2.Years also evenly divisible by 100 are not leap years, except for...
    3.Years also evenly divisible by 400 are leap years.
    */
    if ((year % 4) == 0) {
        if ((year % 100) == 0 && (year % 400) != 0)
            return DOMonth[toInt(month)-1];
    
        return lDOMonth[toInt(month)-1];
    } else
        return DOMonth[toInt(month)-1];
}

// 첫번째 요일 구하기
function getFirstDay(year, month) {
    var tmpDate = new Date();
    tmpDate.setDate(1);
    tmpDate.setMonth(toInt(month)-1);
    tmpDate.setFullYear(year);
    return tmpDate.getDay();
}

// 마지막 요일 구하기
function getLastDay(year, month) {
    var tmpDate = new Date();
    tmpDate.setDate( getDaysOfMonth(year,month) );
    tmpDate.setMonth(toInt(month)-1);
    tmpDate.setFullYear(year);
    return tmpDate.getDay();
}
/////////////////////////날짜 관련된 연산 함수들////////////////////////////

//-->
</script>

</body>
</html>
반응형

'인터넷정보' 카테고리의 다른 글

글자가 커지는 스크립트 (동적)  (0) 2007.10.18
글자가 커지는 스크립트 (동적)  (0) 2007.10.18
윈도우 타이틀바에 현재 시간 출력하기  (0) 2007.10.18
윈도우 타이틀바에 현재 시간 출력하기  (0) 2007.10.18
쇼핑몰이나 여행사의 검색에서 쓸수있는 달력  (0) 2007.10.18
컴퓨터 안에 설치된 글씨체 웹으로 선택하기  (0) 2007.10.18
컴퓨터 안에 설치된 글씨체 웹으로 선택하기  (0) 2007.10.18
새창을 항상 위로 유지하는 방법  (0) 2007.10.18
새창을 항상 위로 유지하는 방법  (0) 2007.10.18
marquee(마퀴)코드 생성기  (0) 2007.10.18

'인터넷정보'의 다른글

  • 현재글쇼핑몰이나 여행사의 검색에서 쓸수있는 달력

관련글

댓글

티스토리툴바