JS实现日历控件

        的确，网上各种日历控件数不胜数，但也正是因为太多，所以选择起来也是件困难的事情。前不久，因为项目要求，就去试着找了些，但总感觉都不太完美，或者因为不够简单，不需要那么复杂的功能，或者因为不好用，不适合项目。我也选一个最接近的试着去读懂，然后想把它改成我所需要的，可惜的是，根本没法读懂，也不知道是我一直都习惯自己写，确实不擅长读别人的代码，还是确实因为其代码难读，其中取的变量名都是ABC之类的，纠结了。后来索性自己花时间写了一个，虽然不一定比得上网上流传的那些，但基本功能还是都有的，就在这里贴出来，算是给自己的一次肯定吧，呵呵。

       先贴CSS部分：

    

         #calendar {
                position: relative;
                font-size: 12px;
                padding: 0;
                z-index: 9998;
                background-color: #FFF9DF;
                border: 1px solid #999;
            }#calendar .left {
                float: left;
            } #calendar .right {
                float: right;
            } #calendar .btn {
                border-radius: 3px;
                border: 1px solid #333;
                background-color: #CCC;
                cursor: pointer;
                margin: 0 3px;
                padding: 2px 5px;
                color: #111;
            }#calendar #year, #month {
                display: inline-block;
                padding: 2px 8px;
                margin: 2px auto;
                text-align: center;
                cursor: pointer;
                border: 1px solid #DDD;
            } #calendar #date .week {
                font-size: 12px;
                text-align: center;
                font-family: arial;
                font-weight: bold;
                margin: 0;
                padding: 0 7px;
                color: #FFF;
                background-color: #999;
                border: 1px solid #222;
            } #calendar #date .week:hover {
                color: #FFF;
                border: 1px solid #222;
            } #calendar #date td {
                text-align: center;
                margin: 0;
                padding: 1px;
                color: #111;
                cursor: pointer;
                background-color: #DDD;
                border: 1px solid #DDD;
            } #calendar #date td:hover {
                color: #7A6E93;
                background-color: #DFC9A7;
                border: 1px solid #F90;
            } #calendar #date .today {
                background-color: #FC0;
            }#calendar #date .before, #calendar #date .after {
                color: #AAA;
                background-color: #EEE;
            } #selYear, #selMonth {
                z-index: 9999;
                background-color: #EEE;
                border: 1px solid #DDD;
            } #selYear span, #selMonth span {
                display: block;
                font-size: 10px;
                height: 11px;
                padding: 2px 8px;
                text-align: center;
                cursor: pointer;
                border: 1px solid #DDD;
            } #selYear span:hover, #selMonth span:hover {
                background-color: #999;
            } #selYear .preYear, #selYear .afterYear {
                height: 1px;
                background-color: #EBB;
            } .bottom {
                text-align: center;
                cursor: pointer;
            } .close {
                padding: 3px 5px;;
                border-radius: 12px;
                border: 1px solid #F90;
                background-color: #7A6E93;
                color: #EEE;
            } .close:hover {
                border: 2px solid red;
            }#time {
                visibility: hidden;
                padding: 3px;
                text-align: center;
                color: #FFE;
                border-radius: 2px;
                background-color: #8B96B9;
            } #hour, #min, #sec {
                padding: 2px 5px;
            } #inputTime {
                width: 15px;
                padding: 0;
                margin: 0 auto;
                background-color: #8B96B9;
                text-align: center;
                z-index: 9999;
                border: none;
            }.selTime {
                position: relative;
                top: -2px;
                font-size: 12px;
            }

              再贴上JS部分：

        var week = new Array("日", "一", "二", "三", "四", "五", "六");
        //初始化日期时间（可以传入一个Date参数）
        function initDate(){
            calClose = false;
            var table = document.getElementById("date");
            if (table == null) {
                return;
            }
            var date = arguments[0];
            if (arguments.length == 0) {
                try {
                    var year = parseInt(document.getElementById("year").innerHTML);
                    var month = parseInt(document.getElementById("month").innerHTML) - 1;
                    date = new Date(year, month);
                } 
                catch (e) {
                    date = new Date();
                }
            }
            
            if (table.children.length != 0) 
                table.removeChild(table.children[0]);
            var tr = table.insertRow(0);
            for (var i = 0; i < 7; i++) {
                var td = tr.insertCell(tr.cells.length);
                initTd(td, week[i], "week");
            }
            var year = date.getFullYear();
            document.getElementById("year").innerHTML = year + "";
            var month = date.getMonth();
            document.getElementById("month").innerHTML = (month + 1) + "";
            var day = new Date(year, month + 1, 0).getDate();
            var w = new Date(year, month, 1).getDay();
            tr = table.insertRow(table.rows.length);
            var lastDay = new Date(year, month, 0).getDate();
            var today = -1;
            if (arguments.length == 2) {
                today = arguments[1];
            }
            for (i = 0; i < w; i++) {
                var td = tr.insertCell(tr.cells.length);
                initTd(td, lastDay - w + i, "before");
            }
            for (i = w; i < 7; i++) {
                var td = tr.insertCell(tr.cells.length);
                if (i - w + 1 == today) {
                    td.className = "today";
                }
                initTd(td, i - w + 1);
            }
            for (i = 7 - w + 1; i <= day; i++) {
                if ((i - 8 + w) % 7 == 0) {
                    tr = table.insertRow(table.rows.length);
                }
                var td = tr.insertCell(tr.cells.length);
                if (i == today) {
                    td.className = "today";
                }
                initTd(td, i);
            }
            var nextWeek = new Date(year, month + 1, 0).getDay();
            if (nextWeek != 6) {
                for (i = 1; i < 7 - nextWeek % 6; i++) {
                    var td = tr.insertCell(tr.cells.length);
                    initTd(td, i, "after");
                }
            }
        }
        
        //辅助函数，生成特定类型的td
        function initTd(td, text, className){
            td.innerHTML = text + "";
            if (className != "week") 
                td.onclick = getDate;
            if (className) {
                td.className = className;
                if (className == "before") 
                    td.title = (parseInt(document.getElementById("year").innerHTML) - 1 + Math.floor((parseInt(document.getElementById("month").innerHTML) + 10) / 12)) + "-" + ((parseInt(document.getElementById("month").innerHTML) + 10) % 12 + 1) + "-" + text;
                else 
                    if (className == "after") 
                        td.title = (parseInt(document.getElementById("year").innerHTML) + Math.floor((parseInt(document.getElementById("month").innerHTML) + 1) / 12)) + "-" + (parseInt(document.getElementById("month").innerHTML) % 12 + 1) + "-" + text;
                    else 
                        td.title = "星期" + text;
            }
            else 
                td.title = document.getElementById("year").innerHTML + "-" + document.getElementById("month").innerHTML + "-" + text;
        }
        
        //创建特定类型的span
        function createSpan(innerHTML, title, idName, className, fun){
            span = document.createElement("span");
            span.innerHTML = innerHTML;
            if (title != null && title != "undefined") {
                span.title = title;
            }
            if (idName != null && idName != "undefined") 
                span.id = idName;
            if (className != null && className != "undefined") 
                span.className = className;
            if (fun != null && fun != "undefined") {
                span.onclick = fun;
            }
            return span;
        }
        
        //上一年  按钮<<函数
        function lastYear(){
            var year = parseInt(document.getElementById("year").innerHTML) - 1;
            var month = parseInt(document.getElementById("month").innerHTML) - 1;
            initDate(new Date(year, month));
        }
        
        //上一月  按钮<函数
        function lastMonth(){
            var year = parseInt(document.getElementById("year").innerHTML);
            var month = parseInt(document.getElementById("month").innerHTML) - 2;
            initDate(new Date(year, month));
        }
        
        //下一年  按钮>>函数
        function nextYear(){
            var year = parseInt(document.getElementById("year").innerHTML) + 1;
            var month = parseInt(document.getElementById("month").innerHTML) - 1;
            initDate(new Date(year, month));
        }
        
        //下一月  按钮>函数
        function nextMonth(){
            var year = parseInt(document.getElementById("year").innerHTML);
            var month = parseInt(document.getElementById("month").innerHTML);
            initDate(new Date(year, month));
        }
        
        //选择月份 月份控件函数
        function selectMonth(){
            if (document.getElementById("selYear")) 
                document.getElementById("selYear").style.display = "none";
            var cal = document.getElementById("calendar");
            var span = document.getElementById("selMonth");
            if (span == null) {
                span = document.createElement("span");
                document.body.appendChild(span);
                span.id = "selMonth";
                span.style.position = "absolute";
                
                for (var i = 1; i < 13; i++) {
                    span.appendChild(createSpan(i, i + "月", null, null, getMonth));
                }
            }
            else {
                span.style.display = "";
            }
            var x = this.offsetLeft;
            var y = this.offsetTop;
            var tt = this;
            while (tt = tt.offsetParent) {
                y += tt.offsetTop;
                x += tt.offsetLeft;
            }
            span.style.left = (x + 1) + "px";
            span.style.top = (y + 1) + "px";
        }
        
        //选择年份 年份控件函数
        function selectYear(){
            if (document.getElementById("selMonth")) 
                document.getElementById("selMonth").style.display = "none";
            var span = document.getElementById("selYear");
            if (span == null) {
                span = document.createElement("span");
                document.body.appendChild(span);
                span.id = "selYear";
                span.style.position = "absolute";
                
                var childSpan = document.createElement("span");
                childSpan.className = "preYear";
                childSpan.onmouseover = function(){
                    minus = setInterval(function(){
                        changeSel(-1);
                    }, 100);
                }
                childSpan.onmouseout = function(){
                    clearInterval(minus);
                }
                span.appendChild(childSpan);
                
                for (var i = 0; i < 9; i++) {
                    span.appendChild(createSpan("", null, null, "yearChild", getYear));
                }
                childSpan = document.createElement("span");
                childSpan.className = "afterYear";
                childSpan.onmouseover = function(){
                    add = setInterval(function(){
                        changeSel(1);
                    }, 100);
                }
                childSpan.onmouseout = function(){
                    clearInterval(add);
                }
                span.appendChild(childSpan);
            }
            else {
                span.style.display = "";
            }
            var cal = document.getElementById("calendar");
            var x = this.offsetLeft;
            var y = this.offsetTop;
            var tt = this;
            while (tt = tt.offsetParent) {
                y += tt.offsetTop;
                x += tt.offsetLeft;
            }
            span.style.left = (x + 1) + "px";
            span.style.top = (y + 1) + "px";
            var year = parseInt(this.innerHTML) - 5;
            for (var i = 1; i < span.children.length - 1; i++) {
                span.children[i].innerHTML = year + i;
                span.children[i].title = (year + i) + "年";
            }
        }
        
        //选取月份
        function getMonth(){
            document.getElementById("month").innerHTML = this.innerHTML;
            this.parentNode.style.display = "none";
            initDate();
        }
        
        //选取年份
        function getYear(){
            document.getElementById("year").innerHTML = this.innerHTML;
            this.parentNode.style.display = "none";
            initDate();
        }
        
        //选取年份控件更改选项函数
        function changeSel(param){
            var sel = document.getElementById("selYear");
            var firstYear = parseInt(sel.children[1].innerHTML) + param - 1;
            for (var i = 1; i < sel.children.length - 1; i++) {
                sel.children[i].innerHTML = firstYear + i;
                sel.children[i].title = (firstYear + i) + "年";
            }
        }
        
        //输入时间函数
        function inputTime(ori, num){
            var cal = document.getElementById("calendar");
            var input = document.getElementById("inputTime");
            if (input == null) {
                input = document.createElement("input");
                input.id = "inputTime";
                input.style.position = "absolute";
            }
            else {
                input.style.display = "";
            }
            var x = ori.offsetLeft;
            var y = ori.offsetTop;
            var tt = ori;
            while (tt = tt.offsetParent) {
                y += tt.offsetTop;
                x += tt.offsetLeft;
            }
            input.style.left = (x + 3) + "px";
            input.style.top = (y + 2) + "px";
            input.value = ori.innerHTML;
            input.onfocus = function(){
                this.select();
            }
			var down = false;
            input.onkeydown = function(event){
                if (event.keyCode == 13) {
                    input.blur();
                }else{
					down = true;
				}
            }
			input.onkeyup = function(){
				if(down&&this.value.length >= 2){
					this.blur();
					if(ori.nextSibling){
						if(ori.style.visibility == "visible")
						ori.nextSibling.nextSibling.click();
					}
				}
			}
            input.onblur = function(){
                this.style.display = "none";
                ori.style.visibility = "visible";
                var value = this.value;
                if (value == "") 
                    return;
                var re = /^\d{1,2}$/;
                if (!re.exec(value)) {
                    return;
                }
                var numValue = parseInt(value);
                if (num == 1) {
                    if (numValue < 0 || numValue > 23) 
                        numValue = 0;
                }
                else {
                    if (numValue < 0 || numValue > 59) 
                        numValue = 0;
                }
                value = "00" + numValue;
                ori.innerHTML = value.substr(value.length - 2);
            }
            ori.style.visibility = "hidden";
            document.body.appendChild(input);
            input.focus();
        }
        
        //获取所选日期时间 关闭日历
        function getDate(){
            var value = this.title;
            if (document.getElementById("selTime").checked) {
                value += (" " + document.getElementById("hour").innerHTML + ":" + document.getElementById("min").innerHTML + ":" + document.getElementById("sec").innerHTML);
            }
            result.value = value;
            close();
        }
        
        //重新设置日历日期时间（根据传入的日期时间字符串设置）
        function resetDate(){
            if (result.value != "") {
                var re = /^\d{4}-\d{1,2}-\d{1,2}$|^\d{4}-\d{1,2}-\d{1,2}\W\d{2}:\d{2}:\d{2}/;
                if (re.exec(result.value)) {
                    var value = result.value.split(" ");
                    if (value.length == 2) {
                        var time = value[1].split(":");
                        document.getElementById("time").style.visibility = "visible";
                        document.getElementById("selTime").checked = true;
                        document.getElementById("hour").innerHTML = time[0];
                        document.getElementById("min").innerHTML = time[1];
                        document.getElementById("sec").innerHTML = time[2];
                    }
                    else {
                        document.getElementById("time").style.visibility = "hidden";
                        document.getElementById("selTime").checked = false;
                    }
                    var dateNum = value[0].split("-");
                    var year = parseInt(dateNum[0]);
                    var month = parseInt(dateNum[1]);
                    var day = parseInt(dateNum[2]);
                    initDate(new Date(year, month - 1, day), day);
                }
                else {
                    initDate(new Date());
                }
            }
            else {
                initDate(new Date());
            }
        }
        
        //关闭日历
        function close(){
            document.getElementById("calendar").style.display = "none";
            if (document.getElementById("selYear")) 
                document.getElementById("selYear").style.display = "none";
            if (document.getElementById("selMonth")) 
                document.getElementById("selMonth").style.display = "none";
        }
        
        //创建日历控件
        function createCalendar(){
            if (arguments.length == 0) {
                alert("There is no arguments, the calendar initialize failed!");
                return;
            }
            result = arguments[0];
            var x = arguments[0].offsetLeft;
            var y = arguments[0].offsetTop + arguments[0].offsetHeight;
            var tt = result;
            while (tt = tt.offsetParent) {
                y += tt.offsetTop;
                x += tt.offsetLeft;
            }
            if (document.getElementById("calendar")) {
                var calendar = document.getElementById("calendar");
                calendar.style.display = "block";
                calendar.style.position = "absolute";
                calendar.style.left = x + "px";
                calendar.style.top = y + "px";
                resetDate();
                return;
            }
            var calendar = document.createElement("table");
            
            calendar.id = "calendar";
            calendar.style.position = "absolute";
            calendar.style.left = x + "px";
            calendar.style.top = y + "px";
            var tr = calendar.insertRow(calendar.rows.length);
            var td = tr.insertCell(tr.cells.length);
            
            var span = document.createElement("span");
            span.className = "left";
            span.appendChild(createSpan("<<", "上一年", null, "btn", lastYear));
            span.appendChild(createSpan("<", "上一月", null, "btn", lastMonth));
            td.appendChild(span);
            
            td = tr.insertCell(tr.cells.length);
            td.colSpan = 2;
			span = document.createElement("span");
            span.appendChild(createSpan("", "年份", "year", null, selectYear));
            span.appendChild(createSpan("年"));
            span.appendChild(createSpan("", "月份", "month", null, selectMonth));
            span.appendChild(createSpan("月"));
			td.appendChild(span);
            
            td = tr.insertCell(tr.cells.length);
            span = document.createElement("span");
            span.className = "right";
            span.appendChild(createSpan(">", "下一月", null, "btn", nextMonth));
            span.appendChild(createSpan(">>", "下一年", null, "btn", nextYear));
            td.appendChild(span);
            
            tr = calendar.insertRow(calendar.rows.length);
            td = tr.insertCell(tr.cells.length);
            td.colSpan = 4;
            ntable = document.createElement("table");
            ntable.id = "date";
            td.appendChild(ntable);
            
            tr = calendar.insertRow(calendar.rows.length);
            tr.className = "bottom";
            td = tr.insertCell(tr.cells.length);
            td.appendChild(createSpan("关闭", "关闭", null, "close", close));
            
            td = tr.insertCell(tr.cells.length);
            td.colSpan = 2;
            var div = document.createElement("div");
            div.id = "time";
            div.appendChild(createSpan("00", "时", "hour", null, function(){
                inputTime(this, 1)
            }));
            div.appendChild(createSpan(":"));
            div.appendChild(createSpan("00", "分", "min", null, function(){
                inputTime(this, 2)
            }));
            div.appendChild(createSpan(":"));
            div.appendChild(createSpan("00", "秒", "sec", null, function(){
                inputTime(this, 3)
            }));
            td.appendChild(div);
            
            td = tr.insertCell(tr.cells.length);
            var input = document.createElement("input");
            input.type = "checkbox";
            input.id = "selTime";
            input.title = "选择是否需要时间";
            input.onclick = function(){
                if (this.checked) {
                    document.getElementById("time").style.visibility = "visible";
                }
                else {
                    document.getElementById("time").style.visibility = "hidden";
                }
            }
            td.appendChild(input);
            td.appendChild(createSpan("时间", "选择是否需要时间", null, "selTime", function(){
                this.previousSibling.click();
            }));
            document.onclick = function(){
                if (calClose) {
                    close();
                }
                else {
                    calClose = true;
                }
            }
            calendar.onclick = function(){
                calClose = false;
            }
            
            document.body.appendChild(calendar);
            resetDate();
        }

       最后就是使用了，很简单，看下面的例子就知道了（引入CSS、JS文件或者直接全部放在一个页面里（不建议））。

                 例：<input οnfοcus="createCalendar(this)"/>

        行了，一点输入框就会弹出日历了。

效果图如下：