很好用的日历控件(calendar)_iframe日历插件-优快云博客

本文链接：https://blog.youkuaiyun.com/qinyanlu/article/details/1144418

本文介绍了一个简单易用的日期控件，通过IFRAME和SCRIPT嵌入网页，结合文本框和按钮，实现日期选择功能。提供详细步骤及控件代码，助你快速集成到网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天帮朋友做个网站,发现了一个很好用的日期控件,如图:

calendar控件

用法也相当简单,方法如下:

1.在网页中嵌入一个IFRAME和一段SCRIPT.

<IFRAME frameBorder=0 id=popFrame name=popFrame scrolling=no src="Calendar.htm" style="BORDER-BOTTOM: 2px ridge; BORDER-LEFT: 2px ridge; BORDER-RIGHT: 2px ridge; BORDER-TOP: 2px ridge; POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 65535"></IFRAME>
<SCRIPT>document.οnclick=function() {document.getElementById("popFrame").style.visibility="hidden";}</SCRIPT>

2.插入一个窗体,其中包含一个文本框和一个按钮,注意按钮的类型(button),在按钮中插入单击事件.

3.OK,大功告成.

附控件代码如下,把代码存为Calendar.htm文件就可以了.

'以下为附件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>A:link {
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
TD {
TEXT-ALIGN: center; VERTICAL-ALIGN: middle
}
.CalHead {
COLOR: white; FONT: bold 8pt Arial
}
.CalCell {
CURSOR: hand; FONT: 8pt Arial
}
.HeadBtn {
FONT: 10pt Fixedsys; HEIGHT: 22px; VERTICAL-ALIGN: middle; WIDTH: 18px
}
.HeadBox {
FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; LINE-HEIGHT: normal; VERTICAL-ALIGN: middle
}
.Today {
COLOR: white; FONT: bold 10pt Arial
}
</STYLE>

<!-- Begin Non-editable part

var gcTemp = gcBG;
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var tbMonSelect, tbYearSelect;
var gCellSet = new Array;
var gfPop = parent.document.getElementById(self.name);
var gdCtrl = new Object;

//****************************************************************************
// Here, you could modify the date format as you need !
//****************************************************************************
function fSetDate(iYear, iMonth, iDay){
gdCtrl.value = iYear+"-"+gMonths[iMonth-1]+"-"+iDay; // <--Modify this
gfPop.style.visibility = "hidden";
}

//****************************************************************************
// Param: popCtrl is the widget beyond which you want popup this calendar;
// dateCtrl is the widget into which you want to put the selected date;
//****************************************************************************
function fPopCalendar(popCtrl, dateCtrl, anEvent){
anEvent.cancelBubble=true;
gdCtrl = parent.document.getElementById(dateCtrl);
var pc = parent.document.getElementById(popCtrl);
fSetYearMon(giYear, giMonth);
var point = fGetXY(pc);
with (gfPop.style) {
left = point.x-1;
top = point.y+pc.offsetHeight+1;
visibility = "visible";
}
}

function Point(iX, iY){
this.x = iX;
this.y = iY;
}

function fGetXY(aTag){
var pt = new Point(aTag.offsetLeft, aTag.offsetTop);
do {
aTag = aTag.offsetParent;
pt.x += aTag.offsetLeft;
pt.y += aTag.offsetTop;
} while(aTag.tagName!="BODY");
return pt;
}

function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);

aCell.bgColor = gcBG;
with (aCell.firstChild){
var iDate = parseInt(innerHTML);
if (style.color==gcOtherDay)
  iOffset = (id<10)?-1:1;
iMonth += iOffset;
if (iMonth<1) {
  iYear--;
  iMonth = 12;
}else if (iMonth>12){
  iYear++;
  iMonth = 1;
}
}

fSetDate(iYear, iMonth, iDate);
}

function fBuildCal(iYear, iMonth) {
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);

var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;

for (d = 0; d < 7; d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}

function fDrawCal(iCellWidth) {
var WeekDay = new Array("日","一","二","三","四","五","六");
var styleTD = " width='"+iCellWidth+"' "; //Coded by Liming Weng(Victor Won) email:victorwon@netease.com

with (document) {
write("<tr>");
for(i=0; i<7; i++)
write("<td class='CalHead' "+styleTD+">" + WeekDay[i] + "</td>");
write("</tr>");

for (w = 1; w < 7; w++) {
  write("<tr>");
  for (d = 0; d < 7; d++) {
   write("<td class='CalCell' "+styleTD+" onMouseOver='gcTemp=this.bgColor;this.bgColor=gcToggle;this.bgColor=gcToggle' onMouseOut='this.bgColor=gcTemp;this.bgColor=gcTemp' οnclick='fSetSelected(this)'>");
   write("<A href='#null' οnfοcus='this.blur();'>00</A></td>")
  }
  write("</tr>");
}
}
}

function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
if (iYear>giEndYear) iYear=giEndYear;
if (iYear<giStartYear) iYear=giStartYear;
tbSelYear.options[iYear-giStartYear].selected = true;
fUpdateCal(iYear, iMon);
}

function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;

if (--iMon<1) {
iMon = 12;
iYear--;
}

fSetYearMon(iYear, iMon);
}

function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;

if (++iMon>12) {
iMon = 1;
iYear++;
}

fSetYearMon(iYear, iMon);
}

with (document) {
write("<table id='popTable' bgcolor='"+gcCalBG+"' cellspacing='0' cellpadding='0' border='0'><TR>");
write("<td align='center'><input type='button' value='<' class='HeadBtn' onClick='fPrevMonth()'>");
write(" <select id='tbMonSelect' class='HeadBox' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</SELECT><SELECT id='tbYearSelect' class='HeadBox' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=giStartYear;i<=giEndYear;i++)
write("<OPTION value='"+i+"'>"+i+"</OPTION>");
write("</SELECT> <input type='button' value='>' class='HeadBtn' οnclick='fNextMonth()'>");
write("</td></TR><TR><td align='center'>");
write("<DIV style='background-color:"+gcFrame+";width:"+((giCellWidth+6)*7+2)+"px;'><table border='0' cellpadding='2' >");
tbSelMonth = getElementById("tbMonSelect");
tbSelYear = getElementById("tbYearSelect");
fDrawCal(giCellWidth);
gCellSet = getElementsByTagName("A");
fSetYearMon(giYear, giMonth);
write("</table></DIV></td></TR><TR><TD align='center'>");
write("<A href='#null' class='Today' οnclick='fSetDate(giYear,giMonth,giDay); this.blur();' onMouseOver='gcTemp=this.style.color;this.style.color=gcToggle' onMouseOut='this.style.color=gcTemp'>今天是: "+giYear+"年"+gMonths[giMonth-1]+"月"+giDay+"日</A>");
write("</TD></TR></TD></TR><TR></TR></TABLE>");

gfPop.width = getElementById("popTable").offsetWidth;
gfPop.height = getElementById("popTable").offsetHeight;
}
// End -- Coded by Liming Weng, email: qinyuanlu@163.com -->
</SCRIPT>
</BODY></HTML>