HTML日历控件实现-优快云博客

本文链接：https://blog.youkuaiyun.com/x4545/article/details/2010218

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
}

body
{
overflow-x:hidden;
overflow-y:hidden;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

</STYLE>

<SCRIPT language=javascript>
<!--//
var str='',i,j,yy,mm,openbound,callback,dd;
var fld1,fld2;
var wp=window.parent;
var cf=wp.document.getElementById("CalFrame");
var fld,curday,today=new Date();
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()
{
    //初始化年
    for(i=1910; i<2050; i++)
    {
        var objOption = document.createElement("OPTION");
        objOption.text = i;
        objOption.value = i;
        document.all.selYear.add(objOption);
    }

    cf.width=220;
    cf.height=198;
}

function selectChange(sYY,sMM)
{
    if(dd == 31) dd=30;
    fld1 = sYY + "-" + sMM + "-" + dd
    alert(fld1);
    initCalendar();
}

<META content="MSHTML 6.00.2800.1458" name=GENERATOR></HEAD>
<BODY bottomMargin=0 leftMargin=0 topMargin=0
onload=resizeCalendar(); rightMargin=0>
<form name="form">
<TABLE id=tbl0 cellSpacing=0 cellPadding=1 bgColor=#336699 border=0>
    <TBODY>
        <TR>
            <TD>
                <TABLE cellSpacing=1 cellPadding=2 width="100%" bgColor=white border=0>
                    <TBODY>
                    <TR bgColor=gray>
                        <TD id=prev width=16>
                            <a href="javascript:drawCalendar(yy-1,mm);">
                                <IMG height=16 src="/calendar_prev.gif" width=16 border=0 alt="上一年">
                            </A>
                        </TD>

                        <TD id=TD2 width=16>
                            <a href="javascript:drawCalendar(yy+1,mm);">
                                <IMG height=16 src="/calendar_next.gif" width=16 border=0 alt="下一年">
                            </A>
                        </TD>

                        <TD id=yyyymm style="FONT-SIZE: 11px; COLOR: white" width="99%">

                        <select id="selYear" name="selYear" onchange="javascript:drawCalendar(parseInt(document.all.selYear.value),mm);" size="1">

            </select>

            <select id="selMonth" name="selMonth" onchange="javascript:drawCalendar(yy,parseInt(document.all.selMonth.value));" size="1">
              <option value="0">一</option>
              <option value="1">二</option>
              <option value="2">三</option>
              <option value="3">四</option>
              <option value="4">五</option>
              <option value="5">六</option>
              <option value="6">七</option>
              <option value="7">八</option>
              <option value="8">九</option>
              <option value="9">十</option>
              <option value="10">十一</option>
              <option value="11">十二</option>
            </select>
                        <TD id=TD1 width=16>
                            <a href="javascript:drawCalendar(yy,mm-1);">
                                <IMG height=16 src="/calendar_prev.gif" width=16 border=0 alt="上一月">
                            </A>
                        </TD>

                        </TD>
                        <TD id=next width=16>
                            <a href="javascript:drawCalendar(yy,mm+1);">
                                <IMG height=16 src="/calendar_next.gif" width=16 border=0 alt="下一月">
                            </A>
                        </TD>

                    </TR>
                    </TBODY>
                </TABLE>

                <TABLE cellSpacing=2 cellPadding=0 width=100% bgColor=white border=0>
                <TBODY>
                    <TR height=18>
                        <TD width=18><FONT color=red>日</FONT></TD>
                        <TD width=18>一</TD>
                        <TD width=18>二</TD>
                        <TD width=18>三</TD>
                        <TD width=18>四</TD>
                        <TD width=18>五</TD>
                        <TD width=18><FONT color=green>六</FONT></TD>
                    </TR>
                    <TR height=1>
                        <TD bgColor=gray colSpan=7></TD>
                    </TR>
<SCRIPT language=javascript>

</SCRIPT>

<TR height=1>
          <TD bgColor=gray colSpan=7></TD></TR>
        <TR height=18>
          <TD colSpan=7><a
          href="javascript:wp.hideCalendar();">关闭</FONT></A><input name="type" type="hidden" value=0 >
    </TD>
  </TR>
    </TBODY></TABLE></TD></TR></TBODY></TABLE></form>
<SCRIPT language=javascript>

</SCRIPT>
</BODY></HTML>
*/

calendar.js

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

  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"){alert("参考控件类型错误！");return;}
}
if(!wcf.bCalLoaded){alert("日历未成功装载！请刷新页面！");return;}
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;}
cf.style.top=(document.body.clientHeight-(eT-sT-mT)-eH>=cf.height)?eT+eH-mT:eT-cf.height-mT;

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.form.type.value=typeID;
wcf.initCalendar();
//alert("bbbb");

}
function hideCalendar()
{
var cf=document.getElementById("CalFrame");
cf.style.display="none";
}

调用函数：

日期控件