calendar.js

js的一个日期控件

        var sHTML1 = "";

        for (i=0; i<12; i++) {

            sName = monthName[i];

            if (i==monthSelected){
                sName = "<B>" + sName + "</B>"
            }

            sHTML+="<tr><td id='m" + i + "' ";
            sHTML+="onmouseover='this.style.backgroundColor=\"#BBCEFF\"' ";
            sHTML+="onmouseout='this.style.backgroundColor=\"\"' ";
            sHTML+="style='cursor:pointer' ";
            sHTML+="onclick='monthConstructed=false;";
            sHTML+="monthSelected=" + i + ";constructCalendar();";
            sHTML+="popDownMonth();event.cancelBubble=true'>";
            sHTML+="&nbsp;" + sName + "&nbsp;</td></tr>\n";
        }

        sHTML1="<table width=70 style='font-family:arial; font-size:11px; ";
        sHTML1+="border-width:1; border-style:solid; border-color:#a0a0a0; ";
        sHTML1+="cursor: hand;' bgcolor='#FFFFDD' cellspacing=0 ";
        sHTML1+="onmouseover='clearTimeout(timeoutID1)' ";
        sHTML1+="onmouseout='clearTimeout(timeoutID1);";
        sHTML1+="timeoutID1=setTimeout(\"popDownMonth()\",100);";
        sHTML1+="event.cancelBubble=true'>\n" + sHTML + "</table>";

        document.getElementById("selectMonth").innerHTML = sHTML1;

        monthConstructed=true;
    }
}

function popUpMonth() {
	constructMonth()
	crossMonthObj.visibility = (dom||ie)? "visible"	: "show"
	crossMonthObj.left = parseInt(crossobj.left) + 50
	crossMonthObj.top =	parseInt(crossobj.top) + 26

	hideElement( 'SELECT', document.getElementById("selectMonth"), stackMonthHid );
	hideElement( 'APPLET', document.getElementById("selectMonth"), stackMonthHid );
}

function popDownMonth()    {
	if( crossMonthObj.visibility != "hidden" ){
    crossMonthObj.visibility= "hidden";
	showElement( stackMonthHid );
	}
}

/*** Year Pulldown ***/

function incYear() {
    for    (i=0; i<7; i++){
        newYear    = (i+nStartingYear)+1
        if (newYear==yearSelected)
        { txtYear =    "&nbsp;<B>"    + newYear +    "</B>&nbsp;"; }
        else
        { txtYear =    "&nbsp;" + newYear + "&nbsp;"; }
        document.getElementById("y"+i).innerHTML = txtYear;
    }
    nStartingYear ++;
    bShow=true;
}

function decYear() {
    for    (i=0; i<7; i++){
        newYear    = (i+nStartingYear)-1
        if (newYear==yearSelected)
        { txtYear =    "&nbsp;<B>"    + newYear +    "</B>&nbsp;" }
        else
        { txtYear =    "&nbsp;" + newYear + "&nbsp;" }
        document.getElementById("y"+i).innerHTML = txtYear;
    }
    nStartingYear --;
    bShow=true;
}

function selectYear(nYear) {
    yearSelected=parseInt(nYear+nStartingYear);
    yearConstructed=false;
    constructCalendar();
    popDownYear();
}

function constructYear() {
    popDownMonth();
    var sHTML =    "";
    var sHTML1 = "";
    if (!yearConstructed) {

        sHTML="<tr><td align='center' ";
        sHTML+="onmouseover='this.style.backgroundColor=\"#BBCEFF\"' ";
        sHTML+="onmouseout='clearInterval(intervalID1);";
        sHTML+="this.style.backgroundColor=\"\"' ";
        sHTML+="style='cursor:pointer' ";
        sHTML+="onmousedown='clearInterval(intervalID1);";
        sHTML+="intervalID1=setInterval(\"decYear()\",30)' ";
        sHTML+="onmouseup='clearInterval(intervalID1)'>-</td></tr>"

        j = 0;
        nStartingYear = yearSelected-3;
        for    (i=(yearSelected-3); i<=(yearSelected+3); i++) {
            sName = i;
            if (i==yearSelected){
                sName =    "<B>" +    sName +    "</B>"
            }

            sHTML+="<tr><td id='y" + j + "' ";
            sHTML+="onmouseover='this.style.backgroundColor=\"#BBCEFF\"' ";
            sHTML+="onmouseout='this.style.backgroundColor=\"\"' ";
            sHTML+="style='cursor:pointer' ";
            sHTML+="onclick='selectYear("+j+");";
            sHTML+="event.cancelBubble=true'>&nbsp;" + sName + "&nbsp;</td></tr>"

            j++;
        }

        sHTML+="<tr><td align='center' ";
        sHTML+="onmouseover='this.style.backgroundColor=\"#BBCEFF\"' ";
        sHTML+="onmouseout='clearInterval(intervalID2);";
        sHTML+="this.style.backgroundColor=\"\"' ";
        sHTML+="style='cursor:pointer' ";
        sHTML+="onmousedown='clearInterval(intervalID2);";
        sHTML+="intervalID2=setInterval(\"incYear()\",30)' ";
        sHTML+="onmouseup='clearInterval(intervalID2)'>+</td></tr>"

        sHTML1="<table width=44 style='font-family:arial; ";
        sHTML1+="font-size:11px; border-width:1; border-style:solid; ";
        sHTML1+="border-color:#a0a0a0; cursor: hand;' bgcolor='#FFFFDD' ";
        sHTML1+="onmouseover='clearTimeout(timeoutID2)' ";
        sHTML1+="onmouseout='clearTimeout(timeoutID2);";
        sHTML1+="timeoutID2=setTimeout(\"popDownYear()\",100)' ";
        sHTML1+="cellspacing=0>"    + sHTML    + "</table>";

        document.getElementById("selectYear").innerHTML    = sHTML1;

        yearConstructed    = true;
    }
}

function popDownYear() {
    clearInterval(intervalID1);
    clearTimeout(timeoutID1);
    clearInterval(intervalID2);
    clearTimeout(timeoutID2);
    crossYearObj.visibility= "hidden";
}

function popUpYear() {
	var	leftOffset

	constructYear()
	crossYearObj.visibility	= (dom||ie)? "visible" : "show"
	leftOffset = parseInt(crossobj.left) + document.getElementById("spanYear").offsetLeft
	if (ie)
	{
		leftOffset += 6
	}
	crossYearObj.left =	leftOffset
	crossYearObj.top = parseInt(crossobj.top) +	26
}

/*** calendar ***/
function WeekNbr(n) {
  // Algorithm used:
  // From Klaus Tondering's Calendar document (The Authority/Guru)
  // hhtp://www.tondering.dk/claus/calendar.html
  // a = (14-month) / 12
  // y = year + 4800 - a
  // m = month + 12a - 3
  // J = day + (153m + 2) / 5 + 365y + y / 4 - y / 100 + y / 400 - 32045
  // d4 = (J + 31741 - (J mod 7)) mod 146097 mod 36524 mod 1461
  // L = d4 / 1460
  // d1 = ((d4 - L) mod 365) + L
  // WeekNumber = d1 / 7 + 1

  year = n.getFullYear();
  month = n.getMonth() + 1;
  if (startAt == 0) {
     day = n.getDate() + 1;
  }
  else {
     day = n.getDate();
  }

  a = Math.floor((14-month) / 12);
  y = year + 4800 - a;
  m = month + 12 * a - 3;
  b = Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400);
  J = day + Math.floor((153 * m + 2) / 5) + 365 * y + b - 32045;
  d4 = (((J + 31741 - (J % 7)) % 146097) % 36524) % 1461;
  L = Math.floor(d4 / 1460);
  d1 = ((d4 - L) % 365) + L;
  week = Math.floor(d1/7) + 1;

  return week;
}

function constructCalendar () {
    var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31);

    var dateMessage;
    var startDate = new Date (yearSelected,monthSelected,1);
    var endDate;

    if (monthSelected==1)
    {
        endDate = new Date (yearSelected,monthSelected+1,1);
        endDate = new Date (endDate    - (24*60*60*1000));
        numDaysInMonth = endDate.getDate();
    }
    else
    {
        numDaysInMonth = aNumDays[monthSelected];
    }

    datePointer = 0;
    dayPointer = startDate.getDay(); //- startAt;

    if (dayPointer<0)
    {
        dayPointer = 6;
    }
    sHTML = "<table border=0 style='font-family:arial;font-size:11px;'><tr>";

    if (showWeekNumber==1)
    {
        sHTML+="<td width=27><b>" + weekString + "</b></td>";
        sHTML+="<td width=1 rowspan=7 bgcolor='#d0d0d0' ";
        sHTML+="style='padding:0px'><img src='"+imgDir+"divider.gif' width=1></td>";
    }

    for    (i=0; i<7; i++)    {
        sHTML += "<td width='27' align='right'><font color=brown size=2><B>"+ dayName[i]+"</B></font></td>";
    }
    sHTML +="</tr><tr>";

    if (showWeekNumber==1)
    {
        sHTML += "<td align=right>" + WeekNbr(startDate) + "&nbsp;</td>";
    }

    for ( var i=1; i<=dayPointer;i++ )
    {
        sHTML += "<td>&nbsp;</td>";
    }

    for ( datePointer=1; datePointer<=numDaysInMonth; datePointer++ )
    {
        dayPointer++;
        sHTML += "<td align=right>";
        sStyle=styleAnchor;
        if ((datePointer==odateSelected) &&
            (monthSelected==omonthSelected)    &&
            (yearSelected==oyearSelected)) {
                sStyle+=styleLightBorder;
        }

        sHint = "";
        for (k=0;k<HolidaysCounter;k++)
        {
            var bln1=(parseInt(Holidays[k].d)==datePointer)
            var bln2=(parseInt(Holidays[k].m)==(monthSelected+1))
            if (bln1&&bln2)
            {
                var bln3=(parseInt(Holidays[k].y)==0)
                var bln4=(parseInt(Holidays[k].y)==yearSelected)
                var bln5=(parseInt(Holidays[k].y)!=0)
                if (bln3 || (bln4 && bln5))
                {
                    sStyle+="background-color:#FFDDDD;";
                    sHint+=sHint==""?Holidays[k].desc:"\n"+Holidays[k].desc;
                }
            }
        }

        var regexp= /\"/g
        sHint=sHint.replace(regexp,"&quot;");

        var dtmDate = constructDate(datePointer,monthSelected,yearSelected);

        dateMessage="onmousemove='window.status=\"";
        dateMessage+=selectDateMessage.replace("[date]",dtmDate);
        dateMessage+="\"' onmouseout='window.status=\"\"' ";

        if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow)) {

            sHTML+="<b><a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' ";
            sHTML+="href='javascript:dateSelected="+datePointer+";closeCalendar();'>";
            sHTML+="<font color=#ff0000>&nbsp;" + datePointer + "</font>&nbsp;</a></b>";

        } else if (dayPointer % 7 == (startAt * -1)+1) {

            sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' ";
            sHTML+="href='javascript:dateSelected="+datePointer + ";closeCalendar();'>";
            sHTML+="&nbsp;<font color=#b4b4b4>" + datePointer + "</font>&nbsp;</a>";

        } else if (dayPointer % 7 == (startAt * -1)+2) {

            sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' ";
            sHTML+="href='javascript:dateSelected="+datePointer + ";closeCalendar();'>";
            sHTML+="&nbsp;<font color=#b4b4b4>" + datePointer + "</font>&nbsp;</a>";

        } else {

            sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' ";
            sHTML+="href='javascript:dateSelected="+datePointer + ";closeCalendar();'>";
            sHTML+="&nbsp;" + datePointer + "&nbsp;</a>";

        }

        sHTML += ""
        if ((dayPointer+startAt) % 7 == startAt) {
            sHTML += "</tr><tr>"
            if ((showWeekNumber==1)&&(datePointer<numDaysInMonth))
            {
                sHTML+="<td align=right>";
                sHTML+=(WeekNbr(new Date(yearSelected,monthSelected,datePointer+1)))
                sHTML+="&nbsp;</td>"
            }
        }
    }

    document.getElementById("content").innerHTML = sHTML

    var strSpanMonth="&nbsp;" +    monthName[monthSelected] + "&nbsp;";
    strSpanMonth+="<IMG id='changeMonth' SRC='"+imgDir+"drop1.gif' ";
    strSpanMonth+="WIDTH='12' HEIGHT='10' BORDER=0>";

    document.getElementById("spanMonth").innerHTML = strSpanMonth;

    var strSpanYear="&nbsp;" + yearSelected    + "&nbsp;";
    strSpanYear+="<IMG id='changeYear' SRC='"+imgDir+"drop1.gif' ";
    strSpanYear+="WIDTH='12' HEIGHT='10' BORDER=0>";

    document.getElementById("spanYear").innerHTML =    strSpanYear;
}

function popUpCalendarTR(ctl, ctl2, format) {
    var    leftpos=0;
    var    toppos=0;

    if (bPageLoaded)
    {
        if ( crossobj.visibility == "hidden" ) {
            ctlToPlaceValue = ctl2;
            dateFormat=format;

            formatChar = " ";
            aFormat    = dateFormat.split(formatChar);
            if (aFormat.length<3)
            {
                formatChar = "/";
                aFormat    = dateFormat.split(formatChar);
                if (aFormat.length<3)
                {
                    formatChar = ".";
                    aFormat    = dateFormat.split(formatChar);
                    if (aFormat.length<3)
                    {
                        formatChar = "-";
                        aFormat    = dateFormat.split(formatChar);
                        if (aFormat.length<3)
                        {
                            // invalid date    format
                            formatChar="";
                        }
                    }
                }
            }

            tokensChanged = 0;

            if ( formatChar != "" )
            {
                // use user's date
                aData =    ctl2.value.split(formatChar);

                for    (i=0;i<3;i++)
                {
                    if ((aFormat[i]=="d") || (aFormat[i]=="dd"))
                    {
                        dateSelected = parseInt(aData[i], 10);
                        tokensChanged ++;
                    }
                    else if ((aFormat[i]=="m") || (aFormat[i]=="mm"))
                    {
                        monthSelected = parseInt(aData[i], 10) - 1;
                        tokensChanged ++;
                    }
                    else if (aFormat[i]=="yyyy")
                    {
                        yearSelected = parseInt(aData[i], 10);
                        tokensChanged ++;
                    }
                    else if (aFormat[i]=="mmm")
                    {
                        for (j=0; j<12;    j++)
                        {
                            if (aData[i]==monthName[j])
                            {
                                monthSelected=j;
                                tokensChanged ++;
                            }
                        }
                    }
                }
            }

            if ((tokensChanged!=3)||isNaN(dateSelected)||isNaN(monthSelected)||isNaN(yearSelected))
            {
                dateSelected = dateNow;
                monthSelected = monthNow;
                yearSelected = yearNow;
            }

            odateSelected=dateSelected;
            omonthSelected=monthSelected;
            oyearSelected=yearSelected;

            aTag = ctl;

            do {
                aTag = aTag.offsetParent;
                leftpos += aTag.offsetLeft;
                toppos += aTag.offsetTop;
            } while(aTag.tagName!="BODY")

            crossobj.left = (fixedX==-1 ? ctl.offsetLeft + leftpos : fixedX)

            crossobj.top = (fixedY==-1 ? ctl.offsetTop + toppos + ctl.offsetHeight + 2 : fixedY)

            constructCalendar(1, monthSelected, yearSelected);

            crossobj.visibility=((dom||ie)? "visible" : "show");

            hideElement( 'SELECT', document.getElementById("calendar"), stackCalHid );
            hideElement( 'APPLET', document.getElementById("calendar"), stackCalHid );

            bShow = true;
        }
        else
        {
            hideCalendar();
            if (ctlNow!=ctl) {popUpCalendarTR(ctl, ctl2, format)};
        }
        ctlNow = ctl;
    }
}

document.onkeypress = function hidecal1 () {
    if (event.keyCode==27)
    {
        hideCalendar();
    }
}
document.onclick = function hidecal2 () {
    if (!bShow)
    {
        hideCalendar();
    }
    bShow = false;
}

init();