📄 calendar.htm
字号:
<HTML><HEAD><TITLE>Date Picker</TITLE>
<STYLE>
<!--
.hdr {background:gray;color:#FFFFFF;border-width:1px;border-color:black;border-style:solid}
.hdrA {background:gray;color:#FFFFFF;border-width:1px;border-color:black;border-style:solid;cursor:hand;}
.ndt {position:absolute;width:19;height:19;}
.bdt {position:absolute;width:19;height:19;}
.dt {position:absolute;width:19;height:19;cursor:hand;}
.sdt {position:absolute;width:19;height:19;}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#990000 VLINK=#990000 ALINK=#990000 onLoad="DoLoad()">
<BASEFONT FACE="Arial,Helvetica,Geneva,Swiss,Sans Serif">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 style="border-width:2px;border-color:black;border-style:solid;font:8pt arial;background:white;">
<TR><TD HEIGHT=20>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 HEIGHT=20 style="font: 8pt arial;"><TR>
<TD WIDTH=9 ID=PrevDiv CLASS="hdrA" align=center onClick="PYC();">
<IMG ID=PrevYear SRC="prev_y.gif" ALT="Show Previous Year" width="9" height="6"></TD>
<TD WIDTH=11 class="hdrA" align=center onClick="PMC();">
<IMG ID=PrevMonth SRC="prev_m.gif" ALT="Show Previous Month" width="4" height="6"></TD>
<TD WIDTH=90 ALIGN=MIDDLE CLASS="hdr"><SPAN ID=YearTitle></SPAN> 年 <SPAN ID=MonthTitle></SPAN></TD>
<TD WIDTH=11 ID=NextDiv CLASS="hdrA" onClick="NMC();" align=center>
<IMG ID=NextMonth SRC="next_m.gif" ALT="Show Next Month" width="4" height="6" align=absmiddle></TD>
<TD WIDTH=9 class="hdrA" onClick="NYC();" align=center>
<IMG ID=NextYear SRC="next_y.gif" ALT="Show Next Year" width="9" height="6"></TD>
</TR></TABLE>
</TD></TR>
<TR><TD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD><IMG ID=WeekImg SRC="week0.gif" width="141" height="20"></TD></TR>
<TR><TD HEIGHT=1 BGCOLOR=#000000></TD></TR>
<TR><TD ALIGN=MIDDLE STYLE="position:relative;">
<IMG ID="SelDate" CLASS="sdt" STYLE="display:none;" SRC="seldate.gif" width="19" height="19">
<IMG ID=MonthImg SRC="blank.gif" STYLE="position:relative;left:0;top:0;" width="141" height="121">
<DIV ID=BKIMG1>
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
<IMG SRC="date.gif" width="19" height="19">
</DIV>
<IMG ID="Today" CLASS="ndt" STYLE="display:none;" SRC="ring.gif" onClick="TC()" width="19" height="19">
</TD></TR>
<TR><TD HEIGHT=1 BGCOLOR=#000000></TD></TR>
</TABLE>
</TD></TR>
<TR><TD HEIGHT=20 ALIGN=MIDDLE><A STYLE="color: #336699" HREF="javascript:CC()"> 取 消 </A> <A STYLE="COLOR:#336699" HREF="javascript:ClearDT()"> 置 空 </A></TD></TR>
</TABLE>
<SCRIPT>
<!--
var g_fCalLoaded=false;
var da=document.all;
var wp=window.parent;
var cf=wp.document.all.CalFrame;
var bdc=da.BKIMG1.children;
var dMin;var dMax;
var XOff=2;var YOff=1;
var XSize=20;var YSize=20;
var g_dC=-1;var g_mC=-1;var g_yC=-1;
var g_dI=-1;var g_mI=-1;var g_yI=-1;
function DoLoad()
{
for(i=0;i<7;i++)
{
for(j=0;j<6;j++)
{
var t=j*7+i;
bdc[t].day=t+1;
bdc[t].onclick=BC;
bdc[t].className="dt";
bdc[t].style.left=da.MonthImg.offsetLeft+XOff+XSize*i-1;
bdc[t].style.top=da.MonthImg.offsetTop+YOff+YSize*j;
}
}
}
function TC()
{
if(event.srcElement.className=="dt")
{
var dt=new Date();
wp.SetDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear());
cf.style.display="none";
}
event.cancelBubble = true;
}
function BC()
{
if(event.srcElement.className=="dt")
{
var iDay = event.srcElement.day;
iDay-=GetDOW(1,g_mC,g_yC);
wp.SetDate(iDay,g_mC,g_yC);
cf.style.display="none";
}
event.cancelBubble=true;
}
function CC()
{
cf.style.display="none";
}
function ClearDT()
{
wp.SetDate(null,null,null);
cf.style.display="none";
}
// 显示后一个月的日历，即Next Month Calendar
function NMC()
{
if(g_mC==12)
{
SetDate(g_dC,1,g_yC+1);
}
else
{
SetDate(g_dC,g_mC+1,g_yC);
}
}
// 显示前一个月的日历，即Previous Month Calendar
function PMC()
{
if(g_mC==1)
{
SetDate(g_dC,12,g_yC-1);
}
else
{
SetDate(g_dC,g_mC-1,g_yC);
}
}
// 显示前一年的日历，即Previous Year Calendar
function PYC()
{
SetDate(g_dC, g_mC, g_yC-1);
}
// 显示后一年的日历，即Next Year Calendar
function NYC()
{
SetDate(g_dC, g_mC, g_yC+1);
}
function SetInputDate(day,month,year)
{
g_dI = day;
g_mI = month;
g_yI = year;
}
function FmtTitle(str)
{
//alert(str);
var r=str.charAt(0);
for(i=1;i<str.length;i++)
r=r+" "+str.charAt(i);
return r;
}
function SetMinMax(min,max)
{
//alert("in SetMinMax, min=" + min);
//alert("in SetMinMax, max=" + max);
dMin=min;
dMax=max;
}
function SetDate(day, month, year)
{
//alert(day + " * " + month + " * " + year);
da.WeekImg.src="week"+wp.GetDowStart()+".gif";
da.MonthImg.src="w"+GetDOW(1,month,year)+"d"+GetMonthCount(month,year)+".gif";
da.MonthTitle.innerHTML = FmtTitle(rgMN[month-1]);
da.YearTitle.innerHTML = FmtTitle(year.toString());
var dt=new Date();
var s,n,v,d;
d="none";
if(month==dt.getMonth()+1&&year==dt.getFullYear())
{
iBox=dt.getDate()+GetDOW(1,dt.getMonth()+1,dt.getFullYear())-1;
if(ValidDate(dt.getDate(),dt.getMonth()+1,dt.getFullYear()))
n="dt";
else
n="bdt";
da.Today.className=n;
da.Today.style.left=bdc[iBox].style.left;
da.Today.style.top=bdc[iBox].style.top;
d="block";
}
da.Today.style.display=d;
d="none";
if(-1!=g_dI&&month==g_mI&&year==g_yI)
{
iBox=g_dI+GetDOW(1,g_mI,g_yI)-1;
da.SelDate.style.left=bdc[iBox].style.left;
da.SelDate.style.top=bdc[iBox].style.top;
d="block";
}
da.SelDate.style.display=d;
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<=(dMin.getMonth()+1)) )
{
n="hdr";
v="hidden";
}
else
{
n="hdrA";
v="visible";
}
da.PrevDiv.className=n;
da.PrevYear.style.visibility=v;
da.PrevMonth.style.visibility=v;
if( year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>=(dMax.getMonth()+1)) )
{
n="hdr";
v="hidden";
}
else
{
n="hdrA";
v="visible";
}
da.NextDiv.className=n;
da.NextYear.style.visibility=v;
da.NextMonth.style.visibility=v;
var i=0;
var iMin=GetDOW(1,month,year);
var iMax=GetMonthCount(month,year)+GetDOW(1,month,year);
for(;i<iMin;i++)
{
bdc[i].src="nodate.gif";
bdc[i].className="ndt";
}
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<(dMin.getMonth()+1)) || year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>(dMax.getMonth()+1)) )
{
for(;i>iMax;i++)
{
// bdc[i].src="baddate.gif";
// bdc[i].className="bdt";
}
}
else if(month==(dMin.getMonth()+1))
{
iBox=dMin.getDate()+GetDOW(1,dMin.getMonth()+1,dMin.getFullYear())-1;
for(;i<iMax;i++)
{
// if(i<iBox)
// {
// s="baddate.gif";
// n="bdt";
// }
// else
{
s="date.gif";
n="dt";
}
bdc[i].src=s;
bdc[i].className=n;
}
}
else if(month==(dMax.getMonth()+1))
{
iBox=dMax.getDate()+GetDOW(1,dMax.getMonth()+1,dMax.getFullYear())-1;
for(;i<iMax;i++)
{
// if(i<iBox+1)
// {
s="date.gif";
n="dt";
// }
// else
{
// s="baddate.gif";
// n="bdt";
}
bdc[i].src=s;
bdc[i].className=n;
}
}
else
{
for(;i<iMax;i++)
{
bdc[i].src="date.gif";
bdc[i].className="dt";
}
}
for(;i<42;i++)
{
bdc[i].src="nodate.gif";
bdc[i].className="ndt";
}
g_dC=day;
g_mC=month;
g_yC=year;
}
function ValidDate(day,month,year)
{
if( year<dMin.getFullYear() || (year==dMin.getFullYear()&&month<(dMin.getMonth()+1)) || (year==dMin.getFullYear()&&month==(dMin.getMonth()+1)&&day<dMin.getDate()) )
return false;
else if( year>dMax.getFullYear() || (year==dMax.getFullYear()&&month>(dMax.getMonth()+1)) || (year==dMax.getFullYear()&&month==(dMax.getMonth()+1)&&day>dMax.getDate()) )
return false;
else
return true;
}
function GetMonthCount(month,year)
{
var c=rgMC[month-1];
if((2==month)&&IsLeapYear(year))
c++;
return c;
}
function IsLeapYear(year)
{
return( 0==year%4 && ((year%100!=0)||(year%400==0)) );
}
function GetDOW(day,month,year)
{
var dt=new Date(year,month-1,day);
return (dt.getDay()+(7-wp.GetDowStart()))%7;
}
var rgMN=new Array(12);
rgMN[0] ="1月";//"JAN";
rgMN[1] ="2月";//"FEB";
rgMN[2] ="3月";//"MAR";
rgMN[3] ="4月";//"APR";
rgMN[4] ="5月";//"MAY";
rgMN[5] ="6月";//"JUN";
rgMN[6] ="7月";//"JUL";
rgMN[7] ="8月";//"AUG";
rgMN[8] ="9月";//"SEP";
rgMN[9] ="10月";//"OCT";
rgMN[10]="11月";//"NOV";
rgMN[11]="12月";//"DEC";
var rgMC=new Array(12);
rgMC[0]=31;
rgMC[1]=28;
rgMC[2]=31;
rgMC[3]=30;
rgMC[4]=31;
rgMC[5]=30;
rgMC[6]=31;
rgMC[7]=31;
rgMC[8]=30;
rgMC[9]=31;
rgMC[10]=30;
rgMC[11]=31;
g_fCalLoaded=true;
//-->
</SCRIPT>
</BODY>
</HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -