平时只有下班时间能code，闲来写了个纯javascript版。引用该calendar.js文件，然后给要设置成日历控件的input的id设置成calendar，该input就会变成日历控件。
<!doctype html><html><head><meta charset="utf-8"><title>日历控件</title><script src="js/calendar.js" defer></script></head><body><input id="calendar" type="text" /></body></html>
引用calendar.js时，一定要加defer属性。
calendar.js源码：
// JavaScript Documentvar days = new Array("日","一","二","三","四","五","六");//星期var today = new Date();//当天日期，备用var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组var month_small = new Array("4","6","9","11"); //包含所有小月的数组var separator = "-";//间隔符 var calendar = document.getElementById("calendar");var cal_parent = calendar.parentNode;//获取父元素var cal_width = ((calendar.clientWidth<150) ? 150 : calendar.clientWidth);//获取input的宽度，如果input宽度小于150，调整为150，150为日历块最小宽度var cal_height = calendar.clientHeight;//获取input的高度，整数var cal_X = calendar.offsetLeft;//获取input左边 距父元素的距离，整数var cal_Y = calendar.offsetTop;//获取input顶部 距父元素的距离，整数calendar.style.cursor = "pointer";//将input的鼠标设置成小手calendar.readOnly = "readOnly";//设置input为只读calendar.onblur = hideCalendar; //当input失去焦点时，隐藏cal_bodycalendar.onclick = showCalendar;//点击input时调用showCalendar函数//取input宽度的七分之一再减一作为方格的边长var pane_height = cal_width/7 - 1; function hideCalendar(){ var cal_body = document.getElementById("cal_body"); if(cal_body != undefined){ cal_body.parentNode.removeChild(cal_body); }}//显示日历主体function showCalendar(){ var cal_body = document.getElementById("cal_body"); if(cal_body != undefined){ cal_body.parentNode.removeChild(cal_body); } else{ var cal_body = document.createElement("DIV"); cal_body.id = "cal_body"; cal_body.style.width = cal_width + "px"; cal_body.style.height = "auto"; cal_body.style.overflow = "hidden"; cal_body.style.position = "absolute"; cal_body.style.zIndex = "9"; cal_body.style.left = cal_X + "px"; cal_body.style.top = (cal_Y + cal_height + 5) + "px"; cal_body.style.border = "solid 1px #CCCCCC"; //鼠标移动到cal_body上时，禁用input的onblur事件，防止cal_body因input失去焦点而被隐藏 cal_body.onmouSEOver = function(){ calendar.onblur = undefined; } //鼠标从cal_body移除时，启用input的onblur事件，并且先让input获得焦点，否则当在cal_body上空白处点击后再移出在其他地方点击时，input因没有焦点而无法触发onblur事件 cal_body.onmouseout = function(){ calendar.focus(); calendar.onblur = hideCalendar; } cal_parent.appendChild(cal_body); var line1 = document.createElement("DIV"); line1.style.width = cal_width + "px"; line1.style.height = pane_height + "px"; line1.style.backgroundColor = "#0FF"; var btn1 = document.createElement("DIV"); btn1.style.width = (cal_width/3 - 3) + "px"; btn1.style.height = pane_height + "px"; btn1.style.lineHeight = pane_height + "px"; btn1.style.textAlign = "center"; btn1.innerHTML = "<"; btn1.style.cursor = "pointer"; btn1.style.CSSFloat = "left"; btn1.onclick = function(){ if(isValidated()){ var old_year = parseInt(document.getElementById("input_year").value); if(old_year > 1960){ var year = old_year - 1; var month = parseInt(document.getElementById("input_month").value); var val = year + separator + month + separator + 1; init(val); } } }; line1.appendChild(btn1); var input_year = document.createElement("INPUT"); input_year.id = "input_year"; input_year.style.width = (cal_width/3) + "px"; input_year.style.height = "70%"; input_year.style.cssFloat = "left"; input_year.style.textAlign = "center"; input_year.onchange = function(){ changed(); }; line1.appendChild(input_year); var btn2 = document.createElement("DIV"); btn2.style.width = (cal_width/3 - 3) + "px"; btn2.style.height = pane_height + "px"; btn2.style.lineHeight = pane_height + "px"; btn2.style.textAlign = "center"; btn2.innerHTML = ">"; btn2.style.cursor = "pointer"; btn2.style.cssFloat = "left"; btn2.onclick = function(){ if(isValidated()){ var old_year = parseInt(document.getElementById("input_year").value); if(old_year < 2050){ var year = old_year + 1; var month = parseInt(document.getElementById("input_month").value); var val = year + separator + month + separator + 1; init(val); } } }; line1.appendChild(btn2); var line2 = document.createElement("DIV"); line2.style.width = cal_width + "px"; line2.style.height = pane_height + "px"; line2.style.backgroundColor = "#0FF"; var btn3 = document.createElement("DIV"); btn3.style.width = (cal_width/3 - 3) + "px"; btn3.style.height = pane_height + "px"; btn3.style.lineHeight = pane_height + "px"; btn3.style.textAlign = "center"; btn3.innerHTML = "<"; btn3.style.cursor = "pointer"; btn3.style.cssFloat = "left"; btn3.onclick = function(){ if(isValidated()){ var old_month = parseInt(document.getElementById("input_month").value) if(old_month > 1){ var year = parseInt(document.getElementById("input_year").value); var month = old_month - 1; var val = year + separator + month + separator + 1; init(val); } else { var year = parseInt(document.getElementById("input_year").value) - 1; var month = 12; var val = year + separator + month + separator + 1; init(val); } } }; line2.appendChild(btn3); var input_month = document.createElement("INPUT"); input_month.id = "input_month"; input_month.style.width = (cal_width/3) + "px"; input_month.style.height = "70%"; input_month.style.cssFloat = "left"; input_month.style.textAlign = "center"; input_month.onchange = function(){ changed(); }; line2.appendChild(input_month); var btn4 = document.createElement("DIV"); btn4.style.width = (cal_width/3 - 3) + "px"; btn4.style.height = pane_height + "px"; btn4.style.lineHeight = pane_height + "px"; btn4.style.textAlign = "center"; btn4.innerHTML = ">"; btn4.style.cursor = "pointer"; btn4.style.cssFloat = "left"; btn4.onclick = function(){ if(isValidated()){ var old_month = parseInt(document.getElementById("input_month").value) if(old_month < 12){ var year = parseInt(document.getElementById("input_year").value); var month = parseInt(document.getElementById("input_month").value) + 1; var val = year + separator + month + separator + 1; init(val); } else { var year = parseInt(document.getElementById("input_year").value) + 1; var month = 1; var val = year + separator + month + separator + 1; init(val); } } }; line2.appendChild(btn4); cal_body.appendChild(line1); cal_body.appendChild(line2); for(var i=0; i < 7; i++){ var pane = document.createElement("DIV"); pane.className = "pane"; pane.style.width = pane_height + "px"; pane.style.height = pane_height + "px"; pane.style.l
新闻热点
疑难解答
