平时只有下班时间能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 document
var 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_body
calendar.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.lineheight = pane_height + "px";
pane.style.textalign = "center";
pane.style.cssfloat = "left";
pane.innerhtml = days[i];
cal_body.appendchild(pane);
}
init(calendar.value);
}
}
function init(val){
clearpane();
var cal_body = document.getelementbyid("cal_body");
var temp_date;
var year;
var month;
var date;
if(val == ""){
temp_date = today;
calendar.value = today.toformatstring(separator);
}
else{
year = val.year();
month = val.month(separator);
date = val.date(separator);
temp_date = new date(year,month,date);
}
year = temp_date.getfullyear();
month = temp_date.getmonth() + 1;
date = temp_date.getdate();
temp_date.setdate(1);
var start = temp_date.getday() + 7;
var end;
if(array_contain(month_big, month)){
end = start + 31;
}
else if(array_contain(month_small, month)){
end = start + 30;
}
else{
if(isleapyear(year)){
end = start + 29;
}
else{
end = start + 28;
}
}
for(var i = 7; i < start; i++){
var pane = document.createelement("div");
pane.classname = "pane";
pane.style.width = pane_height + "px";
pane.style.height = pane_height + "px";
pane.style.lineheight = pane_height + "px";
pane.style.textalign = "center";
pane.style.cssfloat = "left";
cal_body.appendchild(pane);
}
for(var i = start; i < end; i++){
var pane = document.createelement("div");
pane.classname = "pane";
pane.style.width = pane_height + "px";
pane.style.height = pane_height + "px";
pane.style.lineheight = pane_height + "px";
pane.style.textalign = "center";
pane.style.cssfloat = "left";
pane.innerhtml = i - start + 1;
pane.style.cursor = "pointer";
pane.onmouseover = function(){
this.style.backgroundcolor = '#0ff';
}
if(date == (i - start + 1))
pane.style.backgroundcolor = '#0ff';
else{
pane.onmouseout = function(){
this.style.backgroundcolor = '';
}
}
pane.onclick = function(){
calendar.value = year + separator + month + separator + this.innerhtml;
cal_body.parentnode.removechild(cal_body);
}
cal_body.appendchild(pane);
document.getelementbyid("input_year").value = year;
document.getelementbyid("input_month").value = month;
}
}
//格式化输出
date.prototype.toformatstring = function(separator){
var result = this.getfullyear() + separator + (this.getmonth() + 1) + separator + this.getdate();
return result;
};
//从格式化字符串中获取年份
string.prototype.year = function(){
var str = this.substring(0,4);
return str;
};
//从格式化字符串中获取月份
string.prototype.month = function(separator){
var start = this.indexof(separator) + 1;
var end = this.lastindexof(separator);
return parseint(this.substring(start, end)) - 1;
};
//从格式化字符串中获取日期
string.prototype.date = function(separator){
var start = this.lastindexof(separator) + 1;
return this.substring(start);
};
//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
function array_contain(array, obj){
for (var i = 0; i < array.length; i++){
if (array[i] == obj)
return true;
}
return false;
}
//判断年份year是否为闰年，是闰年则返回true，否则返回false
function isleapyear(year){
var a = year % 4;
var b = year % 100;
var c = year % 400;
if( ( (a == 0) && (b != 0) ) || (c == 0) ){
return true;
}
return false;
}
//清除方格
function clearpane(){
var limit = document.getelementsbyclassname("pane").length;
for(var i=7; i < limit; i++){
var pane = document.getelementsbyclassname("pane").item(7);
pane.parentnode.removechild(pane);
}
}
//判断输入是否合法
function isvalidated(){
var year = document.getelementbyid("input_year").value;
var month = document.getelementbyid("input_month").value;
if(isnan(year) || isnan(month)){
alert("请输入正确的年份/月份");
return false;
}
else{
if(year%1 != 0 || month%1 != 0){
alert("请输入正确的年份/月份");
return false;
}
else{
year = parseint(year);
if(year < 1960 || year > 2050){
alert("请输入1960~2050之间的年份！");
return false;
}
else if(month < 1 || month >12){
alert("请输入正确的月份！");
return false;
}
else{
return true;
}
}
}
}
//年份月份发生变化时处理函数
function changed(){
if(isvalidated()){
var year = document.getelementbyid("input_year").value;
var month = document.getelementbyid("input_month").value;
var val = year + separator + month + separator + 1;
init(val);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
更多纯javascript版日历控件。