谁能给一段点击之后出现日历的代码

发布网友发布时间：2022-04-21 21:06

共1个回答

热心网友时间：2022-04-20 03:50

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#FFFFFF" text="#000000" leftMargin="0" topMargin="0">
<script>
Seperator = "-";
var DateStr = "";
// value为指定格式的日期字符串
function SetDateFromCalendar(value)
{
if(top.frames.length>0)
{
top.frames("mainFrame").DateObjCtrl_SetDateValue(value);
}
else
{
parent.DateObjCtrl_SetDateValue(value);
}
DateStr = value;
}
// 返回日期字符串
function public_getSelectedDate()
{
return DateStr;
}
</script>
<script language="JavaScript">
var gdCtrl = new Object();
var gcGray = "#808080";
var gcToggle = "#ffff00";
var gcBG = "#cccccc";

var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var VicPopCal = new Object();

// 显示日历控件
function fPopCalendar(popCtrl, dateCtrl, popCal){
parent.event.cancelBubble=true;
VicPopCal = popCal; // 弹出日历控件的ID
gdCtrl = dateCtrl; // 得到日期数字的控件ID, popCtrl是指定日期控件出现位置的标识
fSetYearMon(giYear, giMonth);
var point = fGetXY(popCtrl); // 得到popCtrl的坐标
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight+1; // 设置日历控件的坐标
visibility = 'visible';
}
VicPopCal.focus();
}
// 隐藏日历控件, 设置gdCtrl的值, 单击今天日期后执行该函数
// 直接得到日期字符串
function fSetDate(iYear, iMonth, iDay){
gdCtrl.value = iMonth+"-"+iDay+"-"+iYear; //Here, you could modify the locale as you need !!!!
VicPopCal.style.visibility = "hidden";
}
// 单击表格执行此函数
function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);

aCell.bgColor = gcBG;
// 此段代码,控制要是点中的不是当月的日期,自动得到前一个月或后一个月
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
if (color==gcGray)
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
if (iMonth<1) {
iYear--;
iMonth = 12;
}else if (iMonth>12){
iYear++;
iMonth = 1;
}
}
// 获得年月日期数
var dateText = parseInt(aCell.innerText);
if(iMonth<10)
iMonth = "0" + iMonth;
if(aCell.innerText<10)
dateText = "0" + dateText;
// 将年月日组成指定字符串传给回传函数
SetDateFromCalendar(iYear + Seperator + iMonth + Seperator + dateText);

}
// 指定当前object的显示位置
function Point(iX, iY){
this.x = iX;
this.y = iY;
}
// 建立当月的日期数组
function fBuildCal(iYear, iMonth) { // 传过来的月加了1,表示下一月
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;
}
// 画出星期title,和显示数据
function fDrawCal(iYear, iMonth, iCellWidth, iDateTextSize) {
var WeekDay = new Array("日","一","二","三","四","五","六");
var styleTD = " bgcolor='"+gcBG+"' width='"+iCellWidth+"' bordercolor='"+gcBG+"' valign='middle' align='center' style='font:bold "+iDateTextSize+" Courier;";

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

for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");
write("<font id=cellText Victor='KinLee'> </font>");
write("</td>")
}
write("</tr>");
}
}
}
// 填入表格日期数据,可用的和不可用的用不同的底色来区分
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth); // 初始化当月的日期显示数组
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d]) { // cellText是表格的标识,都叫cellText,用下标来指示
Victor = i++;
if (myMonth[w+1][d]<0) {
color = gcGray;
innerText = -myMonth[w+1][d];
}else{
color = ((d==0)||(d==6))?"red":"black"; // 星期六、日颜色为红色
innerText = myMonth[w+1][d];
}
}
}
// 在下拉框中选中当前年和月, 然后更新数据显示
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].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);
}

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

var gMonths = new Array("01","02","03","04","05","06","07","08","09","10","11","12");
//打印出年月日的显示的表格,之后再填入数字
with (document) {
write("<table id='popTable' border='0' bgcolor='#6699cc'>");
write("<TR>");
write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:16 Fixedsys' onClick='fPrevMonth()'>");
write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=2000;i<3000;i++)
write("<OPTION value='"+i+"'>"+i+"</OPTION>");
write("</SELECT>");
write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <input type='button' name='NextMonth' value='>' style='height:20;width:20;FONT:16 Fixedsys' onclick='fNextMonth()'>");
write("</td>");
write("</TR><TR>");
write("<td align='center'>");
write("<DIV style='background-color:teal;'><table width='100%' border='0' cellpadding='2'>");
fDrawCal(giYear, giMonth, 19, 12);
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align='center'>");
write("<font style='cursor:hand;font:12 Fixedsys' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>今天是: "+giYear+"年"+gMonths[giMonth-1]+"月"+giDay+"日"+"</font>");
write("</TD></TR>");write("</TD></TR>");
write("</TABLE>");
}

var today = new Date();
// 用当前的日期更新月历显示
fSetYearMon(today.getFullYear(), today.getMonth() + 1);
// 填入表格日期数据,可用的和不可用的用不同的底色来区分
//fUpdateCal(today.getFullYear(), today.getMonth() + 1);

</script>

</body>
</html>