popcalendar.js

这个一个简单的时间获取控件

        document.getElementById("selectYear").innerHTML	= "<table width=44 class='dropdown-style' onmouseover='clearTimeout(timeoutID2);' onmouseout='clearTimeout(timeoutID2);timeoutID2=setTimeout(\"popDownYear()\",100);' cellspacing=0>"	+ sHTML	+ "</table>";
        yearConstructed	= true;
    }
}

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

function popUpYear() {
    var	leftOffset;
    constructYear();
    crossYearObj.visibility	= "visible";
    leftOffset = parseInt(crossobj.left) + document.getElementById("spanYear").offsetLeft;
    if (ie) {
        leftOffset += 6;
    }
    crossYearObj.left =	leftOffset + 'px';
    crossYearObj.top = parseInt(crossobj.top) +	26 + 'px';
}

/*** calendar ***/


var isoHelper = {
 getWeekNumber: function(date) {
    // 1. Convert input to Y M D
    var Y = date.getFullYear();
    var M = date.getMonth();
    var D = date.getDay();

    // 4. Find the DayOfYearNumber for Y M D
    var DayOfYearNumber = isoHelper.findDayOfYearNumber(date);

     // 5. Find the Jan1Weekday for Y (Monday=1, Sunday=7)
     var Jan1Weekday = isoHelper.findJan1Weekday(date);

     // 6. Find the Weekday for Y M D
     var WeekDay = isoHelper.findDayWeek(date);

     // 7. Find if Y M D falls in YearNumber Y-1, WeekNumber 52 or 53
     var YearNumber = Y;
     var WeekNumber = 0;
     if((DayOfYearNumber <= (8 - Jan1Weekday)) && (Jan1Weekday > 4)) {
        YearNumber = Y - 1
        if((Jan1Weekday == 5) || (Jan1Weekday == 6 && isoHelper.isLeapYear(date))) {
            WeekNumber = 53;
        } else {
            WeekNumber = 52;
        }
     }

     // 8. Find if Y M D falls in YearNumber Y+1, WeekNumber 1
     if(YearNumber == Y) {
        var I;
        if(isoHelper.isLeapYear(date)) {
            I = 366;
        } else {
            I = 365
        }

        if ((I - DayOfYearNumber) < (4 - WeekDay)) {
            YearNumber = Y + 1;
            WeekNumber = 1;
        }
     }

     // 9. Find if Y M D falls in YearNumber Y, WeekNumber 1 through 53
     if(YearNumber == Y) {
        var J;
        J = DayOfYearNumber + (7 - WeekDay) + (Jan1Weekday - 1)
        WeekNumber = J / 7;
        if(Jan1Weekday > 4 ) {
            WeekNumber -= 1;
        }
     }

     return WeekNumber;
 },
 isLeapYear: function(ddate) {
    var Y = ddate.getFullYear();
    if ((Y % 4) == 0 && (Y % 100) != 0) {
        return true;
    }
    if((Y % 400) == 0) {
        return true;
    }
    return false;
 },
 findDayOfYearNumber: function(date) {
    var months = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
    var day = date.getDate() + months[date.getMonth()];
    // only for march and onwards in leap years:
    if(isoHelper.isLeapYear(date) && date.getMonth() > 1) {
        day++;
    }
    return day;
 },
 findJan1Weekday: function(date) {
    var d = new Date(date.getFullYear(), 0, 1);
    // convert from 0=sun .. 1=mon
    // to 1=mon to 7=sun
    return(isoHelper.findDayWeek(d));
 },
 findDayWeek: function (date) {
    var WeekDay = date.getDay();
    if (startAt == 0) {
        WeekDay = WeekDay + 1;
    }
    if(WeekDay == 0) {
        WeekDay = 7;
    }
    return WeekDay;
 }
}

function constructCalendar() {
    var dateMessage;
    var	startDate =	new	Date (yearSelected,monthSelected,1);
    var	endDate	= new Date (yearSelected,monthSelected+1,1);
    endDate	= new Date(endDate	- (24*60*60*1000));
    numDaysInMonth = endDate.getDate();

    datePointer	= 0;
    dayPointer = startDate.getDay() - startAt;
    
    if (dayPointer<0) {
        dayPointer = 6;
    }

    sHTML =	"<table	border=0 class='body-style'><tr>";

    if (showWeekNumber==1) {
        sHTML += "<td width=27><b>" + weekString + "</b></td><td width=1 rowspan=7 class='weeknumber-div-style'><img src='"+imgDir+"divider.gif' width=1></td>";
    }

    for	(i=0; i<7; i++)	{
        sHTML += "<td width='27' align='right'><B>"+ getDayName(i)+"</B></td>";
    }
    sHTML +="</tr><tr>";
    
    if (showWeekNumber==1) {
        sHTML += "<td align=right>" + isoHelper.getWeekNumber(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>";

        var sStyle="normal-day-style"; //regular day

        if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow)) {
            //today 
            sStyle = "current-day-style";
        } else if (dayPointer % 7 == (startAt * -1) +1) {
            //end-of-the-week day
            sStyle = "end-of-weekday-style";
        }

        //selected day
        if ((datePointer==odateSelected) &&	(monthSelected==omonthSelected)	&& (yearSelected==oyearSelected)) {
            sStyle += " selected-day-style";
        }

        sHint = "";
        dateMessage = "onmousemove='window.status=\""+selectDateMessage.replace("[date]",constructDate(datePointer,monthSelected,yearSelected))+"\";' onmouseout='window.status=\"\";' ";
        sHTML += "<a class='"+sStyle+"' "+dateMessage+" title=\"" + sHint + "\" href='javascript:dateSelected="+datePointer+";closeCalendar();'>&nbsp;" + datePointer + "&nbsp;</a>";
        sHTML += "";
        if ((dayPointer+startAt) % 7 == startAt) { 
            sHTML += "</tr><tr>";
            if ((showWeekNumber==1)&&(datePointer<numDaysInMonth)) {
                sHTML += "<td align=right>" + isoHelper.getWeekNumber(new Date(yearSelected, monthSelected, datePointer + 1)) + "&nbsp;</td>";
            }
        }
    }

    document.getElementById("content").innerHTML   = sHTML;
    document.getElementById("spanMonth").innerHTML = "&nbsp;" +	monthName[monthSelected] + "&nbsp;<IMG id='changeMonth' SRC='"+imgDir+"drop1.gif' WIDTH='12' HEIGHT='10' BORDER=0>";
    document.getElementById("spanYear").innerHTML =	"&nbsp;" + yearSelected	+ "&nbsp;<IMG id='changeYear' SRC='"+imgDir+"drop1.gif' WIDTH='12' HEIGHT='10' BORDER=0>";
}

function getDayName(day) {
    if (startAt == 1) {
        day = (day + 1) % 7;
    }
    return dayName[day];
}

function popUpCalendar(ctl,	ctl2, format, sa) {
    
    // adjust close button image which is already rendered
    document.getElementById("closeimage").src = imgDir + 'close.gif';
    
    if (startAt != sa) {
        startAt = sa;
        bPageLoaded = false;
    }
    
    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") || (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;
            if (aTag.offsetParent) {
                do {
                    aTag = aTag.offsetParent;
                    leftpos	+= aTag.offsetLeft;
                    toppos += aTag.offsetTop;
                } while(aTag.tagName.toUpperCase() != "BODY");
            }
        
            crossobj.left =	(fixedX ==-1) ? ctl.offsetLeft + leftpos + 'px' : fixedX + 'px';
            crossobj.top = (fixedY==-1) ?ctl.offsetTop + toppos + ctl.offsetHeight + 2 + 'px' : fixedY + 'px';
            constructCalendar (1, monthSelected, yearSelected);
            crossobj.visibility = "visible";
            
            hideElement( 'SELECT', document.getElementById("calendar") );
            hideElement( 'APPLET', document.getElementById("calendar") );

            bShow = true;
        }
    } else {
        init();
        popUpCalendar(ctl, ctl2, format, sa);
    }
}

document.onkeypress = function hidecal1(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        if (evt.keyCode == 27) {
            hideCalendar();
        }
    }
}

document.onclick = function hidecal2() {
    if (!bShow) {
        hideCalendar();
    }
    bShow = false;
}