那位大虾能给我一套完整的弹出式日历源代码？记得孟子E章是我老乡，可别忘了帮忙想想办法

//
// JavaScript Calendar Component
// Author: Robert W. Husted  ([email protected])
// Date:   8/22/1999
// Modified Date: 11/30/1999
// Modified By:   Robert W. Husted
// Notes:  Added frameset support (changed reference for "newWin" to "top.newWin")
//         Also changed Spanish "March" from "Marcha" to "Marzo"
//         Fixed JavaScript Date Anomaly affecting days > 28
// 
// 
// 
// Usage:  Add the following lines of code to your page to enable the Calendar
//         component.
//
//
//         // THIS LINE LOADS THE JS LIBRARY FOR THE CALENDAR COMPONENT 
//
//         <SCRIPT LANGUAGE="JavaScript" SRC="calendar.js"></SCRIPT>
//
//
//
//         // THIS LINE IS USED IN CONJUNCTION WITH A FORM FIELD (myDateField) IN A FORM (myForm).
//         // Replace "myForm" and "myDateField" WITH THE NAME OF YOUR FORM AND INPUT FIELD RESPECTIVELY
//         // WINDOW OPTIONS SET THE WIDTH, HEIGHT, AND X/Y POSITION OF THE CALENDAR WINDOW 
//         // WITH TITLEBAR ON, ALL OTHER OPTIONS (TOOLBARS, ETC) ARE DISABLED BY DEFAULT
//
//         <A HREF="javascript:doNothing()" onClick="setDateField(document.myForm.myDateField);top.newWin = window.open('calendar.html','cal','dependent=yes,width=210,height=230,screenX=200,screenY=300,titlebar=yes')">
//         <IMG SRC="calendar.gif" BORDER=0></A><font size=1>Popup Calendar</font>
//
//
// 
// Required Files:
//
//         calendar.js   - contains all JavaScript functions to make the calendar work
//
//         calendar.html - frameset document (not required if you call the showCalendar()
//                         function.  However, calling showCalendar() directly causes
//                         the Java Virtual Machine (JVM) to start which slows down the
//                         loading of the calendar.)
//
// 
// Files Generally Included:
//
//         calendar.gif  - image that looks like a little calendar
// 
//         yourPage.html - page that contains a form and a date field which implements 
//                         the calendar component
// // BEGIN USER-EDITABLE SECTION -----------------------------------------------------// SPECIFY DATE FORMAT RETURNED BY THIS CALENDAR
// (THIS IS ALSO THE DATE FORMAT RECOGNIZED BY THIS CALENDAR)// DATE FORMAT OPTIONS:
//
// dd   = 1 or 2-digit Day
// DD   = 2-digit Day
// mm   = 1 or 2-digit Month
// MM   = 2-digit Month
// yy   = 2-digit Year
// YY   = 4-digit Year
// yyyy = 4-digit Year
// month   = Month name in lowercase letters
// Month   = Month name in initial caps
// MONTH   = Month name in captital letters
// mon     = 3-letter month abbreviation in lowercase letters
// Mon     = 3-letter month abbreviation in initial caps
// MON     = 3-letter month abbreviation in uppercase letters
// weekday = name of week in lowercase letters
// Weekday = name of week in initial caps
// WEEKDAY = name of week in uppercase letters
// wkdy    = 3-letter weekday abbreviation in lowercase letters
// Wkdy    = 3-letter weekday abbreviation in initial caps
// WKDY    = 3-letter weekday abbreviation in uppercase letters
//
// Examples:
//
// calDateFormat = "mm/dd/yy";
// calDateFormat = "Weekday, Month dd, yyyy";
// calDateFormat = "wkdy, mon dd, yyyy";
// calDateFormat = "DD.MM.YY";     // FORMAT UNSUPPORTED BY JAVASCRIPT -- REQUIRES CUSTOM PARSING
//calDateFormat    = "mm/dd/yyyy";
// CALENDAR COLORS
topBackground    = "white";         // BG COLOR OF THE TOP FRAME
bottomBackground = "white";         // BG COLOR OF THE BOTTOM FRAME
tableBGColor     = "white";         // BG COLOR OF THE BOTTOM FRAME'S TABLE
cellColor        = "#DDFFDD";     // TABLE CELL BG COLOR OF THE DATE CELLS IN THE BOTTOM FRAME
headingCellColor = "white";         // TABLE CELL BG COLOR OF THE WEEKDAY ABBREVIATIONS
headingTextColor = "black";         // TEXT COLOR OF THE WEEKDAY ABBREVIATIONS
dateColor        = "blue";          // TEXT COLOR OF THE LISTED DATES (1-28+)
focusColor       = "orange";       // TEXT COLOR OF THE SELECTED DATE (OR CURRENT DATE)
hoverColor       = "red";       // TEXT COLOR OF A LINK WHEN YOU HOVER OVER IT
fontStyle        = "10pt Tahoma, Tahoma";           // TEXT STYLE FOR DATES
headingFontStyle = "10pt Tahoma, Tahoma";      // TEXT STYLE FOR WEEKDAY ABBREVIATIONS// FORMATTING PREFERENCES
bottomBorder  = false;        // TRUE/FALSE (WHETHER TO DISPLAY BOTTOM CALENDAR BORDER)
tableBorder   = 0;            // SIZE OF CALENDAR TABLE BORDER (BOTTOM FRAME) 0=none// END USER-EDITABLE SECTION -------------------------------------------------------// DETERMINE BROWSER BRAND
var isNav = false;
var isIE  = false;// ASSUME IT'S EITHER NETSCAPE OR MSIE
if (navigator.appName == "Netscape") {
    isNav = true;
}
else {
    isIE = true;
}// GET CURRENTLY SELECTED LANGUAGE
selectedLanguage = navigator.language;// PRE-BUILD PORTIONS OF THE CALENDAR WHEN THIS JS LIBRARY LOADS INTO THE BROWSER
buildCalParts();// CALENDAR FUNCTIONS BEGIN HERE ---------------------------------------------------// SET THE INITIAL VALUE OF THE GLOBAL DATE FIELD
function setDateField(dateField) {    // ASSIGN THE INCOMING FIELD OBJECT TO A GLOBAL VARIABLE
    calDateField = dateField;    // GET THE VALUE OF THE INCOMING FIELD
    inDate = dateField.value;    // SET calDate TO THE DATE IN THE INCOMING FIELD OR DEFAULT TO TODAY'S DATE
    setInitialDate();    // THE CALENDAR FRAMESET DOCUMENTS ARE CREATED BY JAVASCRIPT FUNCTIONS
    calDocTop    = buildTopCalFrame();
    calDocBottom = buildBottomCalFrame();
}
// SET THE INITIAL CALENDAR DATE TO TODAY OR TO THE EXISTING VALUE IN dateField
function setInitialDate() {
   
    // CREATE A NEW DATE OBJECT (WILL GENERALLY PARSE CORRECT DATE EXCEPT WHEN "." IS USED AS A DELIMITER)
    // (THIS ROUTINE DOES *NOT* CATCH ALL DATE FORMATS, IF YOU NEED TO PARSE A CUSTOM DATE FORMAT, DO IT HERE)
    calDate = new Date(inDate);    // IF THE INCOMING DATE IS INVALID, USE THE CURRENT DATE
    if (isNaN(calDate)) {        // ADD CUSTOM DATE PARSING HERE
        // IF IT FAILS, SIMPLY CREATE A NEW DATE OBJECT WHICH DEFAULTS TO THE CURRENT DATE
        calDate = new Date();
    }    // KEEP TRACK OF THE CURRENT DAY VALUE
    calDay  = calDate.getDate();    // SET DAY VALUE TO 1... TO AVOID JAVASCRIPT DATE CALCULATION ANOMALIES
    // (IF THE MONTH CHANGES TO FEB AND THE DAY IS 30, THE MONTH WOULD CHANGE TO MARCH
    //  AND THE DAY WOULD CHANGE TO 2.  SETTING THE DAY TO 1 WILL PREVENT THAT)
    calDate.setDate(1);
}
// POPUP A WINDOW WITH THE CALENDAR IN IT
function showCalendar(dateField) {    // SET INITIAL VALUE OF THE DATE FIELD AND CREATE TOP AND BOTTOM FRAMES
    setDateField(dateField);    // USE THE JAVASCRIPT-GENERATED DOCUMENTS (calDocTop, calDocBottom) IN THE FRAMESET
    calDocFrameset = 
        "<HTML><HEAD><TITLE>JavaScript Calendar</TITLE></HEAD>\n" +
        "<FRAMESET ROWS='70,*' FRAMEBORDER='0'>\n" +
        "  <FRAME NAME='topCalFrame' SRC='javascript:parent.opener.calDocTop' SCROLLING='no'>\n" +
        "  <FRAME NAME='bottomCalFrame' SRC='javascript:parent.opener.calDocBottom' SCROLLING='no'>\n" +
        "</FRAMESET>\n";    // DISPLAY THE CALENDAR IN A NEW POPUP WINDOW
    top.newWin = window.open("javascript:parent.opener.calDocFrameset", "calWin", 'dependent=yes,width=210,height=230,screenX=200,screenY=300,titlebar=yes');
    top.newWin.focus();
}
// CREATE THE TOP CALENDAR FRAME
function buildTopCalFrame() {    // CREATE THE TOP FRAME OF THE CALENDAR
    var calDoc =
        "<HTML>" +
        "<HEAD>" +
        "</HEAD>" +
        "<BODY BGCOLOR='" + topBackground + "'>" +
        "<FORM NAME='calControl' onSubmit='return false;'>" +
        "<CENTER>" +
        "<TABLE CELLPADDING=0 CELLSPACING=2 BORDER=0>" +
        "<TR><TD COLSPAN=7>" +
        "<CENTER>" +
        getMonthSelect() +
        "<INPUT NAME='year' VALUE='" + calDate.getFullYear() + "'TYPE=TEXT SIZE=4 MAXLENGTH=4 onChange='parent.opener.setYear()'>" +
        "</CENTER>" +
        "</TD>" +
        "</TR>" +
        "<TR>" +
        "<TD COLSPAN=7>" +
        "<INPUT " +
        "TYPE=BUTTON NAME='previousYear' VALUE='<<'    onClick='parent.opener.setPreviousYear()'><INPUT " +
        "TYPE=BUTTON NAME='previousMonth' VALUE=' < '   onClick='parent.opener.setPreviousMonth()'><INPUT " +
        "TYPE=BUTTON NAME='today' VALUE='Today' onClick='parent.opener.setToday()'><INPUT " +
        "TYPE=BUTTON NAME='nextMonth' VALUE=' > '   onClick='parent.opener.setNextMonth()'><INPUT " +
        "TYPE=BUTTON NAME='nextYear' VALUE='>>'    onClick='parent.opener.setNextYear()'>" +
        "</TD>" +
        "</TR>" +
        "</TABLE>" +
        "</CENTER>" +
        "</FORM>" +
        "</BODY>" +
        "</HTML>";    return calDoc;
}
// CREATE THE BOTTOM CALENDAR FRAME 
// (THE MONTHLY CALENDAR)
function buildBottomCalFrame() {           // START CALENDAR DOCUMENT
    var calDoc = calendarBegin;    // GET MONTH, AND YEAR FROM GLOBAL CALENDAR DATE
    month   = calDate.getMonth();
    year    = calDate.getFullYear();
    // GET GLOBALLY-TRACKED DAY VALUE (PREVENTS JAVASCRIPT DATE ANOMALIES)
    day     = calDay;    var i   = 0;    // DETERMINE THE NUMBER OF DAYS IN THE CURRENT MONTH
    var days = getDaysInMonth();    // IF GLOBAL DAY VALUE IS > THAN DAYS IN MONTH, HIGHLIGHT LAST DAY IN MONTH
    if (day > days) {
        day = days;
    }    // DETERMINE WHAT DAY OF THE WEEK THE CALENDAR STARTS ON
    var firstOfMonth = new Date (year, month, 1);    // GET THE DAY OF THE WEEK THE FIRST DAY OF THE MONTH FALLS ON
    var startingPos  = firstOfMonth.getDay();
    days += startingPos;    // KEEP TRACK OF THE COLUMNS, START A NEW ROW AFTER EVERY 7 COLUMNS
    var columnCount = 0;    // MAKE BEGINNING NON-DATE CELLS BLANK
    for (i = 0; i < startingPos; i++) {        calDoc += blankCell;
columnCount++;
    }    // SET VALUES FOR DAYS OF THE MONTH
    var currentDay = 0;
    var dayType    = "weekday";    // DATE CELLS CONTAIN A NUMBER
    for (i = startingPos; i < days; i++) { var paddingChar = "&nbsp;";        // ADJUST SPACING SO THAT ALL LINKS HAVE RELATIVELY EQUAL WIDTHS
        if (i-startingPos+1 < 10) {
            padding = "&nbsp;&nbsp;";
        }
        else {
            padding = "&nbsp;&nbsp;";
        }        // GET THE DAY CURRENTLY BEING WRITTEN
        currentDay = i-startingPos+1;        // SET THE TYPE OF DAY, THE focusDay GENERALLY APPEARS AS A DIFFERENT COLOR
        if (currentDay == day) {
            dayType = "focusDay";
        }
        else {
            dayType = "weekDay";
        }        // ADD THE DAY TO THE CALENDAR STRING
        calDoc += "<TD align=center bgcolor='" + cellColor + "'>" +
                  "<a class='" + dayType + "' href='javascript:parent.opener.returnDate(" + 
                  currentDay + ")'>" + padding + currentDay + paddingChar + "</a></TD>";        columnCount++;        // START A NEW ROW WHEN NECESSARY
        if (columnCount % 7 == 0) {
            calDoc += "</TR><TR>";
        }
    }    // MAKE REMAINING NON-DATE CELLS BLANK
    for (i=days; i<42; i++)  {        calDoc += blankCell;
columnCount++;        // START A NEW ROW WHEN NECESSARY
        if (columnCount % 7 == 0) {
            calDoc += "</TR>";
            if (i<41) {
                calDoc += "<TR>";
            }
        }
    }    // FINISH THE NEW CALENDAR PAGE
    calDoc += calendarEnd;    // RETURN THE COMPLETED CALENDAR PAGE
    return calDoc;
}
// WRITE THE MONTHLY CALENDAR TO THE BOTTOM CALENDAR FRAME
function writeCalendar() {    // CREATE THE NEW CALENDAR FOR THE SELECTED MONTH & YEAR
    calDocBottom = buildBottomCalFrame();    // WRITE THE NEW CALENDAR TO THE BOTTOM FRAME
    top.newWin.frames['bottomCalFrame'].document.open();
    top.newWin.frames['bottomCalFrame'].document.write(calDocBottom);
    top.newWin.frames['bottomCalFrame'].document.close();
}
// SET THE CALENDAR TO TODAY'S DATE AND DISPLAY THE NEW CALENDAR
function setToday() {    // SET GLOBAL DATE TO TODAY'S DATE
    calDate = new Date();    // SET DAY MONTH AND YEAR TO TODAY'S DATE
    var month = calDate.getMonth();
    var year  = calDate.getFullYear();    // SET MONTH IN DROP-DOWN LIST
    top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex = month;    // SET YEAR VALUE
    top.newWin.frames['topCalFrame'].document.calControl.year.value = year;    // DISPLAY THE NEW CALENDAR
    writeCalendar();
}
// SET THE GLOBAL DATE TO THE NEWLY ENTERED YEAR AND REDRAW THE CALENDAR
function setYear() {    // GET THE NEW YEAR VALUE
    var year  = top.newWin.frames['topCalFrame'].document.calControl.year.value;    // IF IT'S A FOUR-DIGIT YEAR THEN CHANGE THE CALENDAR
    if (isFourDigitYear(year)) {
        calDate.setFullYear(year);
        writeCalendar();
    }
    else {
        // HIGHLIGHT THE YEAR IF THE YEAR IS NOT FOUR DIGITS IN LENGTH
        top.newWin.frames['topCalFrame'].document.calControl.year.focus();
        top.newWin.frames['topCalFrame'].document.calControl.year.select();
    }
}
// SET THE GLOBAL DATE TO THE SELECTED MONTH AND REDRAW THE CALENDAR
function setCurrentMonth() {    // GET THE NEWLY SELECTED MONTH AND CHANGE THE CALENDAR ACCORDINGLY
    var month = top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex;    calDate.setMonth(month);
    writeCalendar();
}
// SET THE GLOBAL DATE TO THE PREVIOUS YEAR AND REDRAW THE CALENDAR
function setPreviousYear() {    var year  = top.newWin.frames['topCalFrame'].document.calControl.year.value;    if (isFourDigitYear(year) && year > 1000) {
        year--;
        calDate.setFullYear(year);
        top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
        writeCalendar();
    }
}
// SET THE GLOBAL DATE TO THE PREVIOUS MONTH AND REDRAW THE CALENDAR
function setPreviousMonth() {    var year  = top.newWin.frames['topCalFrame'].document.calControl.year.value;
    if (isFourDigitYear(year)) {
        var month = top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex;        // IF MONTH IS JANUARY, SET MONTH TO DECEMBER AND DECREMENT THE YEAR
        if (month == 0) {
            month = 11;
            if (year > 1000) {
                year--;
                calDate.setFullYear(year);
                top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
            }
        }
        else {
            month--;
        }
        calDate.setMonth(month);
        top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex = month;
        writeCalendar();
    }
}
// SET THE GLOBAL DATE TO THE NEXT MONTH AND REDRAW THE CALENDAR
function setNextMonth() {    var year = top.newWin.frames['topCalFrame'].document.calControl.year.value;    if (isFourDigitYear(year)) {
        var month = top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex;        // IF MONTH IS DECEMBER, SET MONTH TO JANUARY AND INCREMENT THE YEAR
        if (month == 11) {
            month = 0;
            year++;
            calDate.setFullYear(year);
            top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
        }
        else {
            month++;
        }
        calDate.setMonth(month);
        top.newWin.frames['topCalFrame'].document.calControl.month.selectedIndex = month;
        writeCalendar();
    }
}
// SET THE GLOBAL DATE TO THE NEXT YEAR AND REDRAW THE CALENDAR
function setNextYear() {    var year  = top.newWin.frames['topCalFrame'].document.calControl.year.value;
    if (isFourDigitYear(year)) {
        year++;
        calDate.setFullYear(year);
        top.newWin.frames['topCalFrame'].document.calControl.year.value = year;
        writeCalendar();
    }
}
// GET NUMBER OF DAYS IN MONTH
function getDaysInMonth()  {    var days;
    var month = calDate.getMonth()+1;
    var year  = calDate.getFullYear();    // RETURN 31 DAYS
    if (month==1 || month==3 || month==5 || month==7 || month==8 ||
        month==10 || month==12)  {
        days=31;
    }
    // RETURN 30 DAYS
    else if (month==4 || month==6 || month==9 || month==11) {
        days=30;
    }
    // RETURN 29 DAYS
    else if (month==2)  {
        if (isLeapYear(year)) {
            days=29;
        }
        // RETURN 28 DAYS
        else {
            days=28;
        }
    }
    return (days);
}
// CHECK TO SEE IF YEAR IS A LEAP YEAR
function isLeapYear (Year) {    if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
        return (true);
    }
    else {
        return (false);
    }
}
// ENSURE THAT THE YEAR IS FOUR DIGITS IN LENGTH
function isFourDigitYear(year) {    if (year.length != 4) {
        top.newWin.frames['topCalFrame'].document.calControl.year.value = calDate.getFullYear();
        top.newWin.frames['topCalFrame'].document.calControl.year.select();
        top.newWin.frames['topCalFrame'].document.calControl.year.focus();
    }
    else {
        return true;
    }
}
// BUILD THE MONTH SELECT LIST
function getMonthSelect() {    // BROWSER LANGUAGE CHECK DONE PREVIOUSLY (navigator.language())
    // FIRST TWO CHARACTERS OF LANGUAGE STRING SPECIFIES THE LANGUAGE
    // (THE LAST THREE OPTIONAL CHARACTERS SPECIFY THE LANGUAGE SUBTYPE)
    // SET THE NAMES OF THE MONTH TO THE PROPER LANGUAGE (DEFAULT TO ENGLISH)    // IF FRENCH
    if (selectedLanguage == "fr") {
        monthArray = new Array('Janvier', 'F関rier', 'Mars', 'Avril', 'Mai', 'Juin',
                               'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'D閏embre');
    }
    // IF GERMAN
    else if (selectedLanguage == "de") {
        monthArray = new Array('Januar', 'Februar', 'M鋜z', 'April', 'Mai', 'Juni',
                               'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember');
    }
    // IF SPANISH
    else if (selectedLanguage == "es") {
        monthArray = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
                               'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
    }
    // DEFAULT TO ENGLISH
    else {
        monthArray = new Array('January', 'February', 'March', 'April', 'May', 'June',
                               'July', 'August', 'September', 'October', 'November', 'December');
    }    // DETERMINE MONTH TO SET AS DEFAULT
    var activeMonth = calDate.getMonth();    // START HTML SELECT LIST ELEMENT
    monthSelect = "<SELECT NAME='month' onChange='parent.opener.setCurrentMonth()'>";    // LOOP THROUGH MONTH ARRAY
    for (i in monthArray) {
        
        // SHOW THE CORRECT MONTH IN THE SELECT LIST
        if (i == activeMonth) {
            monthSelect += "<OPTION SELECTED>" + monthArray[i] + "\n";
        }
        else {
            monthSelect += "<OPTION>" + monthArray[i] + "\n";
        }
    }
    monthSelect += "</SELECT>";    // RETURN A STRING VALUE WHICH CONTAINS A SELECT LIST OF ALL 12 MONTHS
    return monthSelect;
}
// SET DAYS OF THE WEEK DEPENDING ON LANGUAGE
function createWeekdayList() {    // IF FRENCH
    if (selectedLanguage == "fr") {
        weekdayList  = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
        weekdayArray = new Array('Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa');
    }
    // IF GERMAN
    else if (selectedLanguage == "de") {
        weekdayList  = new Array('Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag');
        weekdayArray = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');
    }
    // IF SPANISH
    else if (selectedLanguage == "es") {
        weekdayList  = new Array('Domingo', 'Lunes', 'Martes', 'Mi閞coles', 'Jueves', 'Viernes', 'S醔ado')
        weekdayArray = new Array('Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa');
    }
    else {
        weekdayList  = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        weekdayArray = new Array('Sun','Mon','Tue','Wed','Thr','Fri','Sat');
    }    // START HTML TO HOLD WEEKDAY NAMES IN TABLE FORMAT
    var weekdays = "<TR BGCOLOR='" + headingCellColor + "'>";    // LOOP THROUGH WEEKDAY ARRAY
    for (i in weekdayArray) {        weekdays += "<TD class='heading' align=center>" + weekdayArray[i] + "</TD>";
    }
    weekdays += "</TR>";    // RETURN TABLE ROW OF WEEKDAY ABBREVIATIONS TO DISPLAY ABOVE THE CALENDAR
    return weekdays;
}
// PRE-BUILD PORTIONS OF THE CALENDAR (FOR PERFORMANCE REASONS)
function buildCalParts() {    // GENERATE WEEKDAY HEADERS FOR THE CALENDAR
    weekdays = createWeekdayList();    // BUILD THE BLANK CELL ROWS
    blankCell = "<TD align=center bgcolor='" + cellColor + "'>&nbsp;&nbsp;&nbsp;</TD>";    // BUILD THE TOP PORTION OF THE CALENDAR PAGE USING CSS TO CONTROL SOME DISPLAY ELEMENTS
    calendarBegin =
        "<HTML>" +
        "<HEAD>" +
        // STYLESHEET DEFINES APPEARANCE OF CALENDAR
        "<STYLE type='text/css'>" +
        "<!--" +
        "TD.heading { text-decoration: none; color:" + headingTextColor + "; font: " + headingFontStyle + "; }" +
        "A.focusDay:link { color: " + focusColor + "; text-decoration: none; font: " + fontStyle + "; }" +
        "A.focusDay:visited { color: " + focusColor + "; text-decoration: none; font: " + fontStyle + "; }" +
        "A.focusDay:hover { color: " + hoverColor + "; text-decoration: none; font: " + fontStyle + "; }" +
        "A.weekday:visited { color: " + dateColor + "; text-decoration: none; font: " + fontStyle + "; }" +
        "A.weekday:link { color: " + dateColor + "; text-decoration: none; font: " + fontStyle + "; }" +
        "A.weekday:hover { color: " + hoverColor + "; font: " + fontStyle + "; }" +
        "-->" +
        "</STYLE>" +
        "</HEAD>" +
        "<BODY BGCOLOR='" + bottomBackground + "'" +
        "<CENTER>";        // NAVIGATOR NEEDS A TABLE CONTAINER TO DISPLAY THE TABLE OUTLINES PROPERLY
        if (isNav) {
            calendarBegin += 
                "<TABLE CELLPADDING=0 CELLSPACING=1 BORDER=" + tableBorder + " ALIGN=CENTER BGCOLOR='" + tableBGColor + "'><TR><TD>";
        }        // BUILD WEEKDAY HEADINGS
        calendarBegin +=
            "<TABLE CELLPADDING=0 CELLSPACING=2 BORDER=" + tableBorder + " ALIGN=CENTER BGCOLOR='" + tableBGColor + "'>" +
            weekdays +
            "<TR>";
    // BUILD THE BOTTOM PORTION OF THE CALENDAR PAGE
    calendarEnd = "";        // WHETHER OR NOT TO DISPLAY A THICK LINE BELOW THE CALENDAR
        if (bottomBorder) {
            calendarEnd += "<TR></TR>";
        }        // NAVIGATOR NEEDS A TABLE CONTAINER TO DISPLAY THE BORDERS PROPERLY
        if (isNav) {
            calendarEnd += "</TD></TR></TABLE>";
        }        // END THE TABLE AND HTML DOCUMENT
        calendarEnd +=
            "</TABLE>" +
            "</CENTER>" +
            "</BODY>" +
            "</HTML>";
}
// REPLACE ALL INSTANCES OF find WITH replace
// inString: the string you want to convert
// find:     the value to search for
// replace:  the value to substitute
//
// usage:    jsReplace(inString, find, replace);
// example:  jsReplace("To be or not to be", "be", "ski");
//           result: "To ski or not to ski"
//
function jsReplace(inString, find, replace) {    var outString = "";    if (!inString) {
        return "";
    }    // REPLACE ALL INSTANCES OF find WITH replace
    if (inString.indexOf(find) != -1) {
        // SEPARATE THE STRING INTO AN ARRAY OF STRINGS USING THE VALUE IN find
        t = inString.split(find);        // JOIN ALL ELEMENTS OF THE ARRAY, SEPARATED BY THE VALUE IN replace
        return (t.join(replace));
    }
    else {
        return inString;
    }
}
// JAVASCRIPT FUNCTION -- DOES NOTHING (USED FOR THE HREF IN THE CALENDAR CALL)
function doNothing() {
}
// ENSURE THAT VALUE IS TWO DIGITS IN LENGTH
function makeTwoDigit(inValue) {    var numVal = parseInt(inValue, 10);    // VALUE IS LESS THAN TWO DIGITS IN LENGTH
    if (numVal < 10) {        // ADD A LEADING ZERO TO THE VALUE AND RETURN IT
        return("0" + numVal);
    }
    else {
        return numVal;
    }
}
// SET FIELD VALUE TO THE DATE SELECTED AND CLOSE THE CALENDAR WINDOW
function returnDate(inDay)
{    // inDay = THE DAY THE USER CLICKED ON
    calDate.setDate(inDay);    // SET THE DATE RETURNED TO THE USER
    var day           = calDate.getDate();
    var month         = calDate.getMonth()+1;
    var year          = calDate.getFullYear();
    var monthString   = monthArray[calDate.getMonth()];
    var monthAbbrev   = monthString.substring(0,3);
    var weekday       = weekdayList[calDate.getDay()];
    var weekdayAbbrev = weekday.substring(0,3);    outDate = calDateFormat;    // RETURN TWO DIGIT DAY
    if (calDateFormat.indexOf("DD") != -1) {
        day = makeTwoDigit(day);
        outDate = jsReplace(outDate, "DD", day);
    }
    // RETURN ONE OR TWO DIGIT DAY
    else if (calDateFormat.indexOf("dd") != -1) {
        outDate = jsReplace(outDate, "dd", day);
    }    // RETURN TWO DIGIT MONTH
    if (calDateFormat.indexOf("MM") != -1) {
        month = makeTwoDigit(month);
        outDate = jsReplace(outDate, "MM", month);
    }
    // RETURN ONE OR TWO DIGIT MONTH
    else if (calDateFormat.indexOf("mm") != -1) {
        outDate = jsReplace(outDate, "mm", month);
    }    // RETURN FOUR-DIGIT YEAR
    if (calDateFormat.indexOf("yyyy") != -1) {
        outDate = jsReplace(outDate, "yyyy", year);
    }
    // RETURN TWO-DIGIT YEAR
    else if (calDateFormat.indexOf("yy") != -1) {
        var yearString = "" + year;
        var yearString = yearString.substring(2,4);
        outDate = jsReplace(outDate, "yy", yearString);
    }
    // RETURN FOUR-DIGIT YEAR
    else if (calDateFormat.indexOf("YY") != -1) {
        outDate = jsReplace(outDate, "YY", year);
    }    // RETURN DAY OF MONTH (Initial Caps)
    if (calDateFormat.indexOf("Month") != -1) {
        outDate = jsReplace(outDate, "Month", monthString);
    }
    // RETURN DAY OF MONTH (lowercase letters)
    else if (calDateFormat.indexOf("month") != -1) {
        outDate = jsReplace(outDate, "month", monthString.toLowerCase());
    }
    // RETURN DAY OF MONTH (UPPERCASE LETTERS)
    else if (calDateFormat.indexOf("MONTH") != -1) {
        outDate = jsReplace(outDate, "MONTH", monthString.toUpperCase());
    }    // RETURN DAY OF MONTH 3-DAY ABBREVIATION (Initial Caps)
    if (calDateFormat.indexOf("Mon") != -1) {
        outDate = jsReplace(outDate, "Mon", monthAbbrev);
    }
    // RETURN DAY OF MONTH 3-DAY ABBREVIATION (lowercase letters)
    else if (calDateFormat.indexOf("mon") != -1) {
        outDate = jsReplace(outDate, "mon", monthAbbrev.toLowerCase());
    }
    // RETURN DAY OF MONTH 3-DAY ABBREVIATION (UPPERCASE LETTERS)
    else if (calDateFormat.indexOf("MON") != -1) {
        outDate = jsReplace(outDate, "MON", monthAbbrev.toUpperCase());
    }    // RETURN WEEKDAY (Initial Caps)
    if (calDateFormat.indexOf("Weekday") != -1) {
        outDate = jsReplace(outDate, "Weekday", weekday);
    }
    // RETURN WEEKDAY (lowercase letters)
    else if (calDateFormat.indexOf("weekday") != -1) {
        outDate = jsReplace(outDate, "weekday", weekday.toLowerCase());
    }
    // RETURN WEEKDAY (UPPERCASE LETTERS)
    else if (calDateFormat.indexOf("WEEKDAY") != -1) {
        outDate = jsReplace(outDate, "WEEKDAY", weekday.toUpperCase());
    }    // RETURN WEEKDAY 3-DAY ABBREVIATION (Initial Caps)
    if (calDateFormat.indexOf("Wkdy") != -1) {
        outDate = jsReplace(outDate, "Wkdy", weekdayAbbrev);
    }
    // RETURN WEEKDAY 3-DAY ABBREVIATION (lowercase letters)
    else if (calDateFormat.indexOf("wkdy") != -1) {
        outDate = jsReplace(outDate, "wkdy", weekdayAbbrev.toLowerCase());
    }
    // RETURN WEEKDAY 3-DAY ABBREVIATION (UPPERCASE LETTERS)
    else if (calDateFormat.indexOf("WKDY") != -1) {
        outDate = jsReplace(outDate, "WKDY", weekdayAbbrev.toUpperCase());
    }    // SET THE VALUE OF THE FIELD THAT WAS PASSED TO THE CALENDAR
    calDateField.value = outDate;    // GIVE FOCUS BACK TO THE DATE FIELD
    calDateField.focus();    // CLOSE THE CALENDAR WINDOW
    top.newWin.close()
}

解决方案 »

  1.   

    <STYLE>
    #calendar {
    LEFT: 50px; VISIBILITY: hidden; POSITION: absolute; TOP: 50px; BACKGROUND-COLOR: white
    }
    TD.cal {
    FONT-SIZE: 8pt; FONT-FAMILY: arial
    }
    TD.calmonth {
    FONT-SIZE: 8pt; FONT-FAMILY: arial; TEXT-ALIGN: right
    }
    TD.caltoday {
    BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #800000; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #800000; COLOR: white; BORDER-TOP-COLOR: #800000; FONT-FAMILY: arial; BACKGROUND-COLOR: #c0c0c0; TEXT-ALIGN: right; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #800000; border-type: solid
    }
    INPUT.caltoday {
    FONT-SIZE: 8pt; WIDTH: 47px; FONT-FAMILY: arial; HEIGHT: 20px
    }
    A.cal {
    COLOR: #000000; TEXT-DECORATION: none
    }
    A.calthismonth {
    COLOR: #000000; TEXT-DECORATION: none
    }
    A.calothermonth {
    COLOR: #808080; TEXT-DECORATION: none
    }
    </STYLE><SCRIPT language=JavaScript>
    var use_css=false;
    var use_layers=false;   
    if (document.all)    { use_css    = true; }
    if (document.layers) { use_layers = true; }var CALWINDOW;
    function writestyles(doc) {
    var result = "";
    result += "<STYLE>\n";
    result += "TD.cal { font-family:arial; font-size: 8pt; }\n";
    result += "TD.calmonth { font-family:arial; font-size: 8pt; text-align: right;}\n";
    result += "TD.caltoday { font-family:arial; font-size: 8pt; text-align: right; color: white; background-color:#C0C0C0; border-width:1; border-type:solid; border-color:#800000; }\n";
    result += "INPUT.caltoday { font-family:arial; font-size: 8pt; width:47px; height: 20px; }\n";
    result += "A.cal { text-decoration:none; color:#000000; }\n";
    result += "A.calthismonth { text-decoration:none; color:#000000; }\n";
    result += "A.calothermonth { text-decoration:none; color:#808080; }\n";
    result += "</STYLE>\n";
    if (doc != "") {
    doc.write(result);
    }
    else {
    return result;
    }
    }
    writestyles(this.document);function getOffsetLeft (el) {
    var scrollamount = document.body.scrollLeft;
    var ol = el.offsetLeft;
    while ((el = el.offsetParent) != null) { ol += el.offsetLeft; }
    ol = ol - scrollamount;
    return ol;
    }
    function getOffsetTop (el) {
    var scrollamount = document.body.scrollTop;
    var ot = el.offsetTop;
    while((el = el.offsetParent) != null) { ot += el.offsetTop; }
    ot = ot - scrollamount;
    return ot;
    }
    function showCalendar(divname, anchorname, functionname) {

    if (use_css) {
    var x = getOffsetLeft(document.all[anchorname]);
    var y = getOffsetTop(document.all[anchorname]);
    }
    else if (use_layers) {
    var found=0;
    for (var i=0; i<document.anchors.length; i++) {
    if (document.anchors[i].name == anchorname) {
    found=1;
    break;
    }
    }
    if (found == 0) {
    return;
    }
    var x = document.anchors[i].x;
    var y = document.anchors[i].y;
    x=x-window.pageXOffset;
    y=y-window.pageYOffset;
    }
    else {
    return;
    }
    x = x-152;
    y = y+25;

    if (divname != "") {
    // Position the calendar DIV
    if (use_layers) { var calendardiv = document.layers[divname]; }
    if (use_css)    { var calendardiv = document.all[divname].style; }
    calendardiv.left = x;
    calendardiv.top  = y;
    // Write output to calendar DIV
    if (arguments.length>4) { 
    outputCalendar(divname,functionname,arguments[3],arguments[4]);
    }
    else {
    outputCalendar(divname,functionname);
    }
    // Show the calendar DIV
    calendardiv.visibility = "visible";
    }

    else {
    if (use_layers) {
    var windowx = window.screenX;
    var windowy = window.screenY + (window.outerHeight-24-window.innerHeight);
    }
    if (use_css) {
    var windowx = window.screenLeft;
    var windowy = window.screenTop;
    }
    x = x + windowx;
    y = y + windowy;
    if (!CALWINDOW || CALWINDOW.closed) {
    CALWINDOW = window.open("about:blank","calwindow","status,width=150,height=175,screenX="+x+",left="+x+",screenY="+y+",top="+y+",resizable");
    }
    // Write output to popup window
    if (arguments.length>4) { 
    outputCalendar(divname,functionname,arguments[3],arguments[4]);
    }
    else {
    outputCalendar(divname,functionname);
    }
    }
    }function hideCalendar(divname) {
    if (divname != "") {
    if (use_layers) { var calendardiv = document.layers[divname]; }
    if (use_css)    { var calendardiv = document.all[divname].style; }
    calendardiv.visibility = "hidden";
    }
    else {
    if (CALWINDOW && !CALWINDOW.closed) {
    CALWINDOW.close();
    }
    }
    }

    function outputCalendar(divname, functionname) {
    var now = new Date();
    if (arguments.length > 2) { var month = arguments[2]; }
    else { var month = now.getMonth()+1; }
    if (arguments.length > 3) { var year = arguments[3]; }
    else { var year = now.getFullYear(); }
    var monthnames = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
    var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31); if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) { // leap year
    daysinmonth[2] = 29;
    }
    var current_month = new Date(year,month-1,1);

    var display_year = year;
    var display_month = month;
    var display_date = 1; var offset = 0;
    var weekday= current_month.getDay();
    if (weekday > 0) {
    display_month--;
    if (display_month < 1) { display_month = 12; display_year--; }
    display_date = daysinmonth[display_month]-weekday+1;
    }
    var next_month = month+1;
    var next_month_year = year;
    if (next_month > 12) { next_month=1; next_month_year++; }
    var last_month = month-1;
    var last_month_year = year;
    if (last_month < 1) { last_month=12; last_month_year--; }

    var date_class;
    var result = "";
    if (divname == "" ) {
    var windowref = "window.opener.";
    }
    else {
    var windowref = "";
    }
    if (divname == "") {
    result += "<HTML><HEAD>"+writestyles('')+"<BODY MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0 RIGHTMARGIN=0 LEFTMARGIN=0>";
    }
    result += '<FORM>';
    if (divname != "") {
    result += '<TABLE WIDTH=144 BORDER=1 BORDERWIDTH=1 BORDERCOLOR="#808080" CELLSPACING=0 CELLPADDING=1>';
    result += '<TR><TD ALIGN=CENTER>';
    result += '<CENTER>';
    result += '<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>';
    }
    else {
    result += '<CENTER><TABLE WIDTH=100% BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>';
    }
    result += '<TR BGCOLOR="#ff3366">';
    result += ' <TD CLASS="cal" WIDTH=22 ALIGN=CENTER VALIGN=MIDDLE><B><A CLASS="cal" HREF="javascript:'+windowref+'outputCalendar(\''+divname+'\',\''+functionname+'\','+last_month+','+last_month_year+')">&lt;&lt;</A></B></TD>';
    result += ' <TD CLASS="cal" WIDTH=100 ALIGN=CENTER>'+monthnames[month-1]+' '+year+'</TD>';
    result += ' <TD CLASS="cal" WIDTH=22 ALIGN=CENTER VALIGN=MIDDLE><B><A CLASS="cal" HREF="javascript:'+windowref+'outputCalendar(\''+divname+'\',\''+functionname+'\','+next_month+','+next_month_year+')">&gt;&gt;</A></B></TD>';
    result += '</TR>';
    result += '</TABLE>';
    result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>';
    result += '<TR>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>日</TD>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>一</TD>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>二</TD>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>三</TD>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>四</TD>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>五</TD>';
    result += ' <TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>六</TD>';
    result += '</TR>';
    result += '<TR><TD COLSPAN=7 ALIGN=CENTER><IMG SRC="graypixel.gif" WIDTH=120 HEIGHT=1></TD></TR>';
    for (var row=1; row<=6; row++) {
    result += '<TR>';
    for (var col=1; col<=7; col++) {
    if (display_month == month) {
    date_class = "calthismonth";
    }
    else {
    date_class = "calothermonth";
    }
    if ((display_month == now.getMonth()+1) && (display_date==now.getDate()) && (display_year==now.getFullYear())) {
    td_class="caltoday";
    }
    else {
    td_class="calmonth";
    }
    result += ' <TD CLASS="'+td_class+'"><A HREF="javascript:'+windowref+functionname+'('+display_year+','+display_month+','+display_date+');'+windowref+'hideCalendar(\''+divname+'\');" CLASS="'+date_class+'">'+display_date+'</A></TD>';
    display_date++;
    if (display_date > daysinmonth[display_month]) {
    display_date=1;
    display_month++;
    }
    if (display_month > 12) {
    display_month=1;
    display_year++;
    }
    }
    result += '</TR>';
    }
    result += '<TR><TD COLSPAN=7 ALIGN=CENTER><IMG SRC="graypixel.gif" WIDTH=120 HEIGHT=1></TD></TR>';
    result += '<TR>';
    result += ' <TD COLSPAN=7 ALIGN=CENTER>';
    result += ' <INPUT CLASS="caltoday" TYPE="button" VALUE="Today" onClick="'+windowref+functionname+'(\''+now.getFullYear()+'\',\''+(now.getMonth()+1)+'\',\''+now.getDate()+'\');'+windowref+'hideCalendar(\''+divname+'\');">';
    result += ' <BR>';
    result += ' </TD>';
    result += '</TR>';
    result += '</TABLE>';
    result += '</CENTER>';
    result += '</TD></TR>';
    result += '</TABLE>';
    result += '</FORM>';
    if (divname == "") {
    result += "</BODY></HTML>";
    } if (divname != "") {
    if (use_css) {
    document.all[divname].innerHTML = result;
    }
    if (use_layers) {
    var thedoc = document.layers[divname].document;
    thedoc.open;
    thedoc.write(result);
    thedoc.close();
    }
    }
    else {
    CALWINDOW.document.open();
    CALWINDOW.document.write(result);
    CALWINDOW.document.close();
    }
    }</SCRIPT><SCRIPT language=JavaScript>
    function showdate( year, month, date ){var a = new Array('','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
    month = a[month];
    document.forms[0].date1.value = ""+year+"年"+month+date+"日";
    hideCalendar('calendar');
    }
    function clicklink() {
    if (document.forms[0].caltype[0].checked) {
    showCalendar('calendar','calposition1','showdate');}
    else {showCalendar('','calposition1','showdate');
    }
    }
    </SCRIPT>
    <FORM>请选择日期：<INPUT type=radio CHECKED name=caltype> 
    <B>DIV</B> (DHTML方式) <INPUT type=radio name=caltype> <B>弹出窗口方式</B> <BR><BR>日期: 
    <INPUT name=date1><A name=calposition1> </A>[ <A 
    href="javascript:clicklink()">弹出选择框</A> ] <BR></FORM>
    <DIV id=calendar></DIV>