日历插件 备忘

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>纯JS日历插件（注释全）</title>
    </head>

    <body>
        <input type="text" style="border:1px solid #999;" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" />
    </body>

</html>
<script type="text/javascript">
    var gMonths = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
    var WeekDay = new Array("日", "一", "二", "三", "四", "五", "六");
    var strToday = "今天";
    var strYear = "年";
    var strMonth = "月";
    var strDay = "日";
    var splitChar = "-";
    var startYear = 2000;
    var endYear = 2050;
    var dayTdHeight = 12;
    var dayTdTextSize = 12;
    var gcNotCurMonth = "#E0E0E0";
    var gcRestDay = "#FF0000";
    var gcWorkDay = "#444444";
    var gcMouseOver = "#79D0FF";
    var gcMouseOut = "#F4F4F4";
    var gcToday = "#444444";
    var gcTodayMouseOver = "#6699FF";
    var gcTodayMouseOut = "#79D0FF";
    var gdCtrl = new Object();
    var goSelectTag = new Array();
    var gdCurDate = new Date();
    var giYear = gdCurDate.getFullYear();
    var giMonth = gdCurDate.getMonth() + 1;
    var giDay = gdCurDate.getDate();

    function $() {
        var elements = new Array();
        for(var i = 0; i < arguments.length; i++) {
            var element = arguments[i];
            if(typeof(arguments[i]) == 'string') {
                element = document.getElementById(arguments[i]);
            }
            if(arguments.length == 1) {
                return element;
            }
            elements.Push(element);
        }
        return elements;
    }
    Array.prototype.Push = function() {
        var startLength = this.length;
        for(var i = 0; i < arguments.length; i++) {
            this[startLength + i] = arguments[i];
        }
        return this.length;
    }
    String.prototype.HexToDec = function() {
        return parseInt(this, 16);
    }
    String.prototype.cleanBlank = function() {
        return this.isEmpty() ? "" : this.replace(/s/g, "");
    }

    function checkColor() {
        var color_tmp = (arguments[0] + "").replace(/s/g, "").toUpperCase();
        var model_tmp1 = arguments[1].toUpperCase();
        var model_tmp2 = "rgb(" + arguments[1].substring(1, 3).HexToDec() + "," + arguments[1].substring(1, 3).HexToDec() + "," + arguments[1].substring(5).HexToDec() + ")";
        model_tmp2 = model_tmp2.toUpperCase();
        if(color_tmp == model_tmp1 || color_tmp == model_tmp2) {
            return true;
        }
        return false;
    }

    function $V() {
        return $(arguments[0]).value;
    }

    function fPopCalendar(evt, popCtrl, dateCtrl) {
        evt.cancelBubble = true;
        gdCtrl = dateCtrl;
        fSetYearMon(giYear, giMonth);
        var point = fGetXY(popCtrl);
        with($("calendardiv").style) {
            left = point.x + "px";
            top = (point.y + popCtrl.offsetHeight + 1) + "px";
            visibility = 'visible';
            zindex = '99';
            position = 'absolute';
        }
        $("calendardiv").focus();
    }

    function fSetDate(iYear, iMonth, iDay) {
        var iMonthNew = new String(iMonth);
        var iDayNew = new String(iDay);
        if(iMonthNew.length < 2) {
            iMonthNew = "0" + iMonthNew;
        }
        if(iDayNew.length < 2) {
            iDayNew = "0" + iDayNew;
        }
        gdCtrl.value = iYear + splitChar + iMonthNew + splitChar + iDayNew;
        fHideCalendar();
    }

    function fHideCalendar() {
        $("calendardiv").style.visibility = "hidden";
        for(var i = 0; i < goSelectTag.length; i++) {
            goSelectTag[i].style.visibility = "visible";
        }
        goSelectTag.length = 0;
    }

    function fSetSelected() {
        var iOffset = 0;
        var iYear = parseInt($("tbSelYear").value);
        var iMonth = parseInt($("tbSelMonth").value);
        var aCell = $("cellText" + arguments[0]);
        aCell.bgColor = gcMouseOut;
        with(aCell) {
            var iDay = parseInt(innerHTML);
            if(checkColor(style.color, gcNotCurMonth)) {
                iOffset = (innerHTML > 10) ? -1 : 1;
            }
            iMonth += iOffset;
            if(iMonth < 1) {
                iYear--;
                iMonth = 12;
            } else if(iMonth > 12) {
                iYear++;
                iMonth = 1;
            }
        }
        fSetDate(iYear, iMonth, iDay);
    }

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

    function fBuildCal(iYear, iMonth) {
        var aMonth = new Array();
        for(var 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(var d = 0; d < 7; d++) {
            aMonth[1][d] = (d < iDayOfFirst) ? (iOffsetLast + d) * (-1) : iDate++;
        }
        for(var w = 2; w < 7; w++) {
            for(var d = 0; d < 7; d++) {
                aMonth[w][d] = (iDate <= iDaysInMonth) ? iDate++ : (iNext++) * (-1);
            }
        }
        return aMonth;
    }

    function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize) {
        var colorTD = " bgcolor='" + gcMouseOut + "' bordercolor='" + gcMouseOut + "'";
        var styleTD = " valign='middle' align='center' style='height:" + iCellHeight + "px;font-weight:bolder;font-size:" + iDateTextSize + "px;";
        var dateCal = "";
        dateCal += "<tr>";
        for(var i = 0; i < 7; i++) {
            dateCal += "<td" + colorTD + styleTD + "color:#990099'>" + WeekDay[i] + "</td>";
        }
        dateCal += "</tr>";
        for(var w = 1; w < 7; w++) {
            dateCal += "<tr>";
            for(var d = 0; d < 7; d++) {
                var tmpid = w + "" + d;
                dateCal += "<td" + styleTD + "cursor:pointer;' onclick='fSetSelected(" + tmpid + ")'>";
                dateCal += "<span id='cellText" + tmpid + "'></span>";
                dateCal += "</td>";
            }
            dateCal += "</tr>";
        }
        return dateCal;
    }

    function fUpdateCal(iYear, iMonth) {
        var myMonth = fBuildCal(iYear, iMonth);
        var i = 0;
        for(var w = 1; w < 7; w++) {
            for(var d = 0; d < 7; d++) {
                with($("cellText" + w + "" + d)) {
                    parentNode.bgColor = gcMouseOut;
                    parentNode.borderColor = gcMouseOut;
                    parentNode.onmouseover = function() {
                        this.bgColor = gcMouseOver;
                    };
                    parentNode.onmouseout = function() {
                        this.bgColor = gcMouseOut;
                    };
                    if(myMonth[w][d] < 0) {
                        style.color = gcNotCurMonth;
                        innerHTML = Math.abs(myMonth[w][d]);
                    } else {
                        style.color = ((d == 0) || (d == 6)) ? gcRestDay : gcWorkDay;
                        innerHTML = myMonth[w][d];
                        if(iYear == giYear && iMonth == giMonth && myMonth[w][d] == giDay) {
                            style.color = gcToday;
                            parentNode.bgColor = gcTodayMouseOut;
                            parentNode.onmouseover = function() {
                                this.bgColor = gcTodayMouseOver;
                            };
                            parentNode.onmouseout = function() {
                                this.bgColor = gcTodayMouseOut;
                            };
                        }
                    }
                }
            }
        }
    }

    function fSetYearMon(iYear, iMon) {
        $("tbSelMonth").options[iMon - 1].selected = true;
        for(var 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.toUpperCase() != "BODY");
        return pt;
    }

    function getDateDiv() {
        var noSelectForIE = "";
        var noSelectForFireFox = "";
        if(document.all) {
            noSelectForIE = "onselectstart='return false;'";
        } else {
            noSelectForFireFox = "-moz-user-select:none;";
        }
        var dateDiv = "";
        dateDiv += "<div id='calendardiv' onclick='event.cancelBubble=true' " + noSelectForIE + " style='" + noSelectForFireFox + "position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'>";
        dateDiv += "<table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' >";
        dateDiv += "<tr>";
        dateDiv += "<td><input type='button' id='PrevMonth' value='<' style='height:20px;20px;font-weight:bolder;' onclick='fPrevMonth()'>";
        dateDiv += "</td><td><select id='tbSelYear' style='border:1px solid;' onchange='fUpdateCal($V("tbSelYear"),$V("tbSelMonth"))'>";
        for(var i = startYear; i < endYear; i++) {
            dateDiv += "<option value='" + i + "'>" + i + strYear + "</option>";
        }
        dateDiv += "</select></td><td>";
        dateDiv += "<select id='tbSelMonth' style='border:1px solid;' onchange='fUpdateCal($V("tbSelYear"),$V("tbSelMonth"))'>";
        for(var i = 0; i < 12; i++) {
            dateDiv += "<option value='" + (i + 1) + "'>" + gMonths[i] + "</option>";
        }
        dateDiv += "</select></td><td>";
        dateDiv += "<input type='button' id='NextMonth' value='>' style='height:20px;20px;font-weight:bolder;' onclick='fNextMonth()'>";
        dateDiv += "</td>";
        dateDiv += "</tr><tr>";
        dateDiv += "<td align='center' colspan='4'>";
        dateDiv += "<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>";
        dateDiv += fDrawCal(giYear, giMonth, dayTdHeight, dayTdTextSize);
        dateDiv += "</table></div>";
        dateDiv += "</td>";
        dateDiv += "</tr><tr><td align='center' colspan='4' nowrap>";
        dateDiv += "<span style='cursor:pointer;font-weight:bolder;' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color="" + gcMouseOver + ""' onmouseout='this.style.color="#000000"'>" + strToday + ":" + giYear + strYear + giMonth + strMonth + giDay + strDay + "</span>";
        dateDiv += "</tr></tr>";
        dateDiv += "</table></div>";
        return dateDiv;
    }
    with(document) {
        onclick = fHideCalendar;
        write(getDateDiv());
    }
</script>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yyy251/p/13576398.html