javascript无刷新日历

要用到两个文件
calendar.htm


<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
<!--
td                {FONT-SIZE: 12px; FONT-FAMILY: arial; TEXT-ALIGN: center}
td.dt            {FONT-SIZE: 11px; FONT-FAMILY: arial; TEXT-ALIGN: center}
A                {COLOR: blue}
A:hover        {COLOR: red}
A.bt            {COLOR: #888888}
-->
</STYLE>

<SCRIPT language=javascript>
<!--//
var str='',i,j,yy,mm,openbound,callback;
var fld1,fld2;
var wp=window.parent;
var cf=wp.document.getElementById("CalFrame");
var fld,curday,sd,ed,today=new Date();
var n_position,n_textdate,startdate,enddate,vailidday,oddeven,vailiddate,nextvailiddate,objecttype,mmm,ddd,thirdfocus;
mmm="";
today.setHours(0);today.setMinutes(0);today.setSeconds(0);today.setMilliseconds(0);
//var lastyear=today.getYear(),lastmonth=today.getMonth();

function parseDate(s)//解析日期
{
    var reg=new RegExp("[^0-9-]","")
    if(s.search(reg)>=0)return today;
    var ss=s.split("-");
    if(ss.length!=3)return today;
    if(isNaN(ss[0])||isNaN(ss[1])||isNaN(ss[2]))return today;
    return new Date(parseFloat(ss[0]),parseFloat(ss[1])-1,parseFloat(ss[2]));
}
function resizeCalendar(){cf.width=144;cf.height=171;}//设定日历宽高
function initCalendar()//初始化
{
    curday=today;
    if(fld1&&fld1.value.length>0){curday=parseDate(fld1.value);}
    if(fld2&&fld2.value.length>0){curday=parseDate(fld2.value);}    
    if (!startdate==""){sd=parseDate(startdate)}
    if (!enddate==""){ed=parseDate(enddate)}
    //window.alert(startdate);
    //window.alert(enddate);
    drawCalendar(curday.getFullYear(),curday.getMonth());
}
function drawCalendar(y,m)//画日历
{
    var x=new Date(y,m,1),mv=x.getDay(),d=x.getDate(),de;
    yy=x.getFullYear();mm=x.getMonth();
    document.getElementById("yyyymm").innerHTML=yy+"."+(mm+1>9?mm+1:"0"+(mm+1));
    //清空日历
    for(var i=1;i<=mv;i++)
    {
        de=document.getElementById("d"+i);
        de.innerHTML="";
        de.bgColor="";
    }
    //画日历
    while(x.getMonth()==mm)
    {
        de=document.getElementById("d"+(d+mv));
        if(x.getTime()==curday.getTime())
            de.bgColor="#dddddd";
        else
            de.bgColor="#DEF1F8";
        if(x.getTime()==today.getTime())
        {
            //window.alert(1);
            if(ifDraw(x))
            {
                de.innerHTML="<a href=javascript:setDate("+d+");><font color=red>"+d+"</font></a>";
            }
            else
            {
                de.innerHTML="<font color=#ff0000>"+d+"</font>";                            
            }
            
            
        }
        else if(x.getTime()<today.getTime())
        {
            
            
            //window.alert(2);
            if(ifDraw(x))
            {
                if(openbound){de.innerHTML="<a href=javascript:setDate("+d+"); class=bt>"+d+"</a>";}
                else{de.innerHTML="<font color=#888888>"+d+"</font>";}
            }
            else
            {
                de.innerHTML="<font color=#888888>"+d+"</font>";                            
            }            
        }    
        else
        {
            
            //window.alert(3);
            if(ifDraw(x))
            {    
                de.innerHTML="<a href=javascript:setDate("+d+");>"+d+"</a>";
            }
            else
            {
                de.innerHTML="<font color=#888888>"+d+"</font>";
            }
            
            
        }
        x.setDate(++d);
    }
    while(d+mv<=42)
    {
        de=document.getElementById("d"+(d+mv));
        de.innerHTML="";
        de.bgColor="";
        d++;
    }
}
function drawCalendar222(y,m)//画日历
{
    var x=new Date(y,m,1),mv=x.getDay(),d=x.getDate(),de;
    yy=x.getFullYear();mm=x.getMonth();
    document.getElementById("yyyymm").innerHTML=yy+"."+(mm+1>9?mm+1:"0"+(mm+1));
    //清空日历
    for(var i=1;i<=mv;i++)
    {
        de=document.getElementById("d"+i);
        de.innerHTML="";
        de.bgColor="";
    }
    //画日历
    while(x.getMonth()==mm)
    {
        de=document.getElementById("d"+(d+mv));
        if(x.getTime()==curday.getTime())
            de.bgColor="#dddddd";
        else
            de.bgColor="#DEF1F8";
        if(x.getTime()==today.getTime())
        {
            //window.alert(1);
            if(ifDraw(x))
            {
                de.innerHTML="<a href=javascript:setDate("+d+");><font color=red>"+d+"</font></a>";
            }
            else
            {
                de.innerHTML="<a href=javascript:setDate("+d+");><img  src=./date"+d+".gif  border=0></a>";    
                //de.innerHTML="<img  src=./d.jpg  border=0>";                        
                //de.innerHTML="<a href=javascript:setDate("+d+");><font COLOR=#FF0000> X </font></a>";
            }
            
            
        }
        else if(x.getTime()<today.getTime())
        {
            
            
            //window.alert(2);
            if(ifDraw(x))
            {
                if(openbound){de.innerHTML="<a href=javascript:setDate("+d+"); class=bt>"+d+"</a>";}
                else{de.innerHTML="<font color=#888888>"+d+"</font>";}
            }
            else
            {
                de.innerHTML="<a href=javascript:setDate("+d+");><img  src=./date"+d+".gif  border=0></a>";    
                //de.innerHTML="<img  src=./d.jpg  border=0>";        
                
            //    de.innerHTML="<a href=javascript:setDate("+d+");><font COLOR=#FF0000> X </font></a>";
            }            
        }    
        else
        {
            
            //window.alert(3);
            if(ifDraw(x))
            {    
                de.innerHTML="<a href=javascript:setDate("+d+");>"+d+"</a>";
            }
            else
            {
                de.innerHTML="<a href=javascript:setDate("+d+");><img  src=./date"+d+".gif  border=0></a>";    
                //de.innerHTML="<img  src=./d.jpg  border=0>";    
                //de.innerHTML="<a href=javascript:setDate("+d+");><font COLOR=#FF0000> X </font></a>";
                    
            }
            
            
        }
        x.setDate(++d);
    }
    while(d+mv<=42)
    {
        de=document.getElementById("d"+(d+mv));
        de.innerHTML="";
        de.bgColor="";
        d++;
    }
}

function ifDraw(xd)
{
    if(!startdate==""&&!enddate=="")
    {
        
        if(xd.getTime()>=sd.getTime()&&xd.getTime()<=ed.getTime())
        {    
            
            if(returnOE(xd)&&returnVD(xd)&&returnVDE(xd))
            {
                return true
            }
            else
            {
                return false
            }
        }
        else
        {
            return false;
        }
    }
    else
    {
        if(returnOE(xd)&&returnVD(xd)&&returnVDE(xd))
        {
            return true
        }
        else
        {
            return false
        }
        
    }
}
function returnOE(xd)
{
    if(!oddeven=="")
        {
        if(oddeven=="0")
        {
            if(xd.getDate()%2==0)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else
        {
            if(!(xd.getDate()%2==0))
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    
    }
    else
    {
        return true;
    }
}
function returnVD(xd)
{
    if(!vailidday=="")
    {
        if(vailidday.indexOf(xd.getDay().toString())>=0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    else
    {
        return true;
    }
}
function returnVDE(xd)
{
    if(!vailiddate=="")
    {
        if(vailiddate.indexOf(xd.getYear().toString()+"-"+(xd.getMonth()+1).toString()+"-"+xd.getDate().toString()+",")>=0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    else
    {
        return true;
    }
}

function setDate(d)//设置日期
{
    wp.hideCalendar();
    
    if(mm.toString().length==1)
    {
        mmm="0"+(mm+1).toString();
    }
    else
    {
        mmm=mm+1;
    }
    if(d.toString().length==1)
    {
        ddd="0"+d.toString();
    }
    else
    {
        ddd=d;
    }
    var dstr=yy+"-"+(mmm)+"-"+ddd;
    
    //mmm=mm+1;
    //var dstr=yy+"-"+(mmm)+"-"+d;
    var dstr=yy+"-"+(mmm)+"-"+ddd;
    if(callback&&callback.length>0){eval("wp."+callback+"(\""+dstr+"\")");}
    else{fld1.value=dstr;}
    if(!n_position==""&&!n_textdate=="")
    {        
        //wp.document.getElementById(n_textdate).value="";
        var ob2 = wp.document.getElementById(n_position);
        try
        {
            if ( ob2 == null || ob2.style.display=="none") 
            {
                return;
            }
        }
        catch(exception)
        {
            return;
        }
//        wp.showCalendar(n_position,false,n_textdate,'','',startdate,enddate,vailidday,oddeven,nextvailiddate,objecttype,thirdfocus,fld1.id,true);            
        wp.showCalendar(n_position,false,n_textdate,'','',startdate,enddate,'',oddeven,nextvailiddate,objecttype,thirdfocus,fld1.id,true);            
        
    }
    else
    {
        if(!thirdfocus=="")
        {
            otd=wp.document.getElementById(thirdfocus);
            otd.focus();
            
        }
    }
    
    
}
//-->
</script>
<meta content="MSHTML 6.00.2800.1476" name="generator">
</head>

<body bgColor="white" leftMargin="0" topMargin="0" onload="resizeCalendar();" marginwidth="0" marginheight="0">


<table id="tbl0" cellSpacing="0" cellPadding="1" bgColor="#33cc66" border="0">
  <tbody>
  <tr>
    <td>

      <table cellSpacing="1" cellpadding="2" width="100%" bgcolor="white" border="0" ID="Table1">
        <tbody>
        <tr bgColor="#33cc66">
          <td id="prev" width="16"><A 
            href="javascript:drawCalendar(yy,mm-1);"><img height="16" src="./prev.gif" width="16" border="0"></A></TD>
          <td id="yyyymm" style="FONT-SIZE: 12px; COLOR: white" width="99%"></TD>
          <td id="next" width="16"><A 
            href="javascript:drawCalendar(yy,mm+1);"><img height="16" src="./next.gif" width="16" border="0"></A></td>
            </tr>
        </tbody>
        </table>

      <table cellSpacing="0" cellPadding="0" width="142" bgColor="#DEF1F8" border="0" ID="Table2">
      
        <tbody>
        <tr height="18" bgColor="#ffffff">
          <td width="18" bgColor="#ffffff">日</td>
          <td width="18" bgColor="#ffffff">一</td>
          <td width="18" bgColor="#ffffff">二</td>
          <td width="18" bgColor="#ffffff">三</td>
          <td width="18" bgColor="#ffffff">四</td>
          <td width="18" bgColor="#ffffff">五</td>
          <td width="18" bgColor="#ffffff">六</td>
          </tr>
        <tr height="1">
          <td bgColor="#DEF1F8" colSpan="7"></td></tr>
        <script language=javascript>
<!--//
for(i=0;i<6;i++)
{
    str+="<tr height=18>";
    for(j=1;j<=7;j++)str+="<td id=d"+(i*7+j)+"  bgColor='#DEF1F8'></td>";
    str+="</tr>";
}
document.write(str);
//-->
</script>
        
        <tr bgcolor="#33cc66" height="20">
        <td colspan="7"><A href="javascript:wp.hideCalendar();" style="color:white;font-size:12px;text-decoration:none;">关闭窗口</a></td>
        </tr>
        </tbody>
    </table>
  
        </td>
    </tr>
    </tbody>
</table>

<script language=javascript>
<!--//
var bCalLoaded=true;
//-->
</script>

</body>
</html>

 

calendar.js

document.write('<iframe id=CalFrame name=CalFrame frameborder=0 src=calendar.htm style=display:none;position:absolute;z-index:100></iframe>');
document.onclick=hideCalendar;

function showCalendar(sImg,bOpenBound,sFld1,sNextP,sNextD,sStartD,sEndD,sVD,sOE,sVDE,sOT,s3F,sFld2,sCallback,sNextVDE)
{
    //1.sImg日历弹出位置的控件的名称,
    //2.bOpenBound,
    //3.sFld1取得日期的控件名称,
    
    
    //4.sNextP选取日期后新日历弹出的位置的控件名称,可不输入,
    //5.sNextD选取日期后新日历弹出从中取值的控件名称,可不输入,
    
    //6.sStartD开始有效时间,
    //7.sEndD截至有效时间,
    
    //8.sVD周几有效,例如：'1,3,5',注意星期日应输入'0'
    //9.sOE,单双日有效,'0'表示双日,'1'表示单日
    //10.sVDE特殊日期,例如'2004-10-11,2004-11-20,',最后一定要输入','
    //11.sOT如果是直接在文本框中点击'text',
    //12.s3F下一个日历弹出并选择后点取日期后定位到新的控件
    
    //sFld2,弹出日历默认日期
    //sCallback
    
    // sNextVDE 下一次焦点的有效时间.
    
    var fld1,fld2;
    var cf=document.getElementById("CalFrame");
    var wcf=window.frames.CalFrame;
    var oImg=document.getElementById(sImg);
    if(!oImg){alert("控制对象不存在！");return;}
    if(!sFld1){alert("输入控件未指定！");return;}
    fld1=document.getElementById(sFld1);
    if(!fld1){alert("输入控件不存在！");return;}
    if(fld1.tagName!="INPUT"||fld1.type!="text"){alert("输入控件类型错误！");return;}
    if(sFld2)
    {
        fld2=document.getElementById(sFld2);
        if(!fld2){alert("参考控件不存在！");return;}
        if(fld2.tagName!="INPUT"||(fld2.type!="text"&&fld2.type!="hidden")){alert("参考控件类型错误！");return;}
    }
//    if(!wcf.bCalLoaded){alert("日历未成功装载！请刷新页面！");return;}
    wcf.n_position=sNextP;
    wcf.n_textdate=sNextD;
    wcf.startdate=sStartD;
    wcf.enddate=sEndD;
    wcf.vailidday=sVD;
    wcf.oddeven=sOE;
    wcf.vailiddate=sVDE;
    wcf.nextvailiddate = sNextVDE;
    wcf.objecttype=sOT;
    wcf.thirdfocus=s3F;
    if(cf.style.display=="block"){cf.style.display="none";return;}
    
    var eT=0,eL=0,p=oImg;
    var sT=document.body.scrollTop,sL=document.body.scrollLeft;
    var eH=oImg.height,eW=oImg.width;
    while(p&&p.tagName!="BODY"){eT+=p.offsetTop;eL+=p.offsetLeft;p=p.offsetParent;}
    if(sOT=="text")
    {
        cf.style.top=+(document.body.clientHeight-(eT-sT)-eH>=cf.height)?eT+eH+20:eT-cf.height;        
    }
    else
    {
        cf.style.top=(document.body.clientHeight-(eT-sT)-eH>=cf.height)?eT+eH:eT-cf.height;        
    }
    cf.style.left=(document.body.clientWidth-(eL-sL)>=cf.width)?eL:eL+eW-cf.width;
    cf.style.display="block";
    
    wcf.openbound=bOpenBound;
    wcf.fld1=fld1;
    wcf.fld2=fld2;
    wcf.callback=sCallback;
    wcf.initCalendar();
}
function hideCalendar()
{
    var cf=document.getElementById("CalFrame");
    cf.style.display="none";
}

.htm

添加引用
<script language="JavaScript" src="calendar.js"></script>

<input id="dtB1" style="FONT-SIZE: x-small; WIDTH: 100px; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #ffffc0" onclick="javascript:event.cancelBubble=true;showCalendar('dtB1',true,'dtB1','','','','','','','','text','')" type="text" maxLength="10" name="dtB1" runat="server">
posted @ 2006-07-14 23:00  我爱江南  阅读(1244)  评论(0)    收藏  举报