有关js的日历控件大全

经常会用到日历控件，现在就整理一下，好看即好用的日历控件

第一种方案

1.建立一个JS文件：Calendar.js

<!--
var  cal;
var  isFocus = false ;  // 是否为焦点
// function SelectDate(obj,strFormat) //两个参数改为只传一个
function  SelectDate(obj)
... {
    var date = new Date();
    var by = date.getFullYear()-10; //最小值 → 10 年前
    var ey = date.getFullYear()+10; //最大值 → 10 年后
    cal = (cal==null) ? new Calendar(by, ey, 0) : cal;    //初始化为中文版，1为英文版
    //cal.dateFormatStyle = strFormat; // 默认显示格式为:yyyy-MM-dd ,还可显示 yyyy/MM/dd
    cal.show(obj);
}
/**/ /* 返回日期 */
String.prototype.toDate  =   function (style) ... {
var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年
var m = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月
var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日
if(isNaN(y)) y = new Date().getFullYear();
if(isNaN(m)) m = new Date().getMonth();
if(isNaN(d)) d = new Date().getDate();
var dt ;
eval ("dt = new Date('"+ y+"', '"+(m-1)+"','"+ d +"')");
return dt;
}
/**/ /* 格式化日期 */
Date.prototype.format  =   function (style) ... {
var o = ...{
    "M+" : this.getMonth() + 1, //month
    "d+" : this.getDate(),      //day
    "h+" : this.getHours(),     //hour
    "m+" : this.getMinutes(),   //minute
    "s+" : this.getSeconds(),   //second
    "w+" : "天一二三四五六".charAt(this.getDay()),   //week
    "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
    "S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(style))...{
    style = style.replace(RegExp.$1,
    (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o)...{
    if(new RegExp("("+ k +")").test(style))...{
      style = style.replace(RegExp.$1,
        RegExp.$1.length == 1 ? o[k] :
        ("00" + o[k]).substr(("" + o[k]).length));
    }
}
return style;
} ;

/**/ /*
* 日历类
* @param   beginYear 1990
* @param   endYear   2010
* @param   lang      0(中文)|1(英语) 可自由扩充
* @param   dateFormatStyle "yyyy-MM-dd";
*/
function  Calendar(beginYear, endYear, lang, dateFormatStyle) ... {
this.beginYear = 1990;
this.endYear = 2010;
this.lang = 0;            //0(中文) | 1(英文)
this.dateFormatStyle = "yyyy-MM-dd";

if (beginYear != null && endYear != null)...{
    this.beginYear = beginYear;
    this.endYear = endYear;
}
if (lang != null)...{
    this.lang = lang
}

if (dateFormatStyle != null)...{
    this.dateFormatStyle = dateFormatStyle
}

this.dateControl = null;
this.panel = this.getElementById("calendarPanel");
this.container = this.getElementById("ContainerPanel");
this.form = null;

this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();


this.colors = ...{
"cur_word"      : "#FFFFFF", //当日日期文字颜色
"cur_bg"        : "#83A6F4", //当日日期单元格背影色
"sel_bg"        : "#FFCCCC", //已被选择的日期单元格背影色
"sun_word"      : "#FF0000", //星期天文字颜色
"sat_word"      : "#0000FF", //星期六文字颜色
"td_word_light" : "#333333", //单元格文字颜色
"td_word_dark" : "#CCCCCC", //单元格文字暗色
"td_bg_out"     : "#EFEFEF", //单元格背影色
"td_bg_over"    : "#FFCC00", //单元格背影色
"tr_word"       : "#FFFFFF", //日历头文字颜色
"tr_bg"         : "#666666", //日历头背影色
"input_border" : "#CCCCCC", //input控件的边框颜色
"input_bg"      : "#EFEFEF"   //input控件的背影色
}

this.draw();
this.bindYear();
this.bindMonth();
this.changeSelect();
this.bindData();
}

/**/ /*
* 日历类属性（语言包，可自由扩展）
*/
Calendar.language  = ... {
"year"   : [[""], [""]],
"months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
         ],
"weeks" : [["日","一","二","三","四","五","六"],
        ["SUN","MON","TUR","WED","THU","FRI","SAT"]
         ],
"clear" : [["清空"], ["CLS"]],
"today" : [["今天"], ["TODAY"]],
"close" : [["关闭"], ["CLOSE"]]
}

Calendar.prototype.draw  =   function () ... {
calendar = this;

var mvAry = [];
mvAry[mvAry.length] = ' <div name="calendarForm" style="margin: 0px;">';
mvAry[mvAry.length] = '    <table width="100%" border="0" cellpadding="0" cellspacing="1">';
mvAry[mvAry.length] = '      <tr>';
mvAry[mvAry.length] = '        <th align="left" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;" name="prevMonth" type="button" id="prevMonth" value="&lt;" /></th>';
mvAry[mvAry.length] = '        <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;"></select></th>';
mvAry[mvAry.length] = '        <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;" name="nextMonth" type="button" id="nextMonth" value="&gt;" /></th>';
mvAry[mvAry.length] = '      </tr>';
mvAry[mvAry.length] = '    </table>';
mvAry[mvAry.length] = '    <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF" border="0" cellpadding="3" cellspacing="1">';
mvAry[mvAry.length] = '      <tr>';
for(var i = 0; i < 7; i++)...{
    mvAry[mvAry.length] = '      <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>';
}
mvAry[mvAry.length] = '      </tr>';
for(var i = 0; i < 6;i++)...{
    mvAry[mvAry.length] = '    <tr align="center">';
    for(var j = 0; j < 7; j++)...{
      if (j == 0)...{
        mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>';
      } else if(j == 6)...{
        mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>';
      } else...{
        mvAry[mvAry.length] = ' <td style="cursor:default;"></td>';
      }
    }
    mvAry[mvAry.length] = '    </tr>';
}
mvAry[mvAry.length] = '      <tr style="background-color:' + calendar.colors["input_bg"] + ';">';
mvAry[mvAry.length] = '        <th colspan="2"><input name="calendarClear" type="button" id="calendarClear" value="' + Calendar.language["clear"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length] = '        <th colspan="3"><input name="calendarToday" type="button" id="calendarToday" value="' + Calendar.language["today"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length] = '        <th colspan="2"><input name="calendarClose" type="button" id="calendarClose" value="' + Calendar.language["close"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length] = '      </tr>';
mvAry[mvAry.length] = '    </table>';
mvAry[mvAry.length] = ' </div>';
this.panel.innerHTML = mvAry.join("");

var obj = this.getElementById("prevMonth");
obj.onclick = function ()...{calendar.goPrevMonth(calendar);}
obj.onblur = function ()...{calendar.onblur();}
this.prevMonth= obj;

obj = this.getElementById("nextMonth");
obj.onclick = function ()...{calendar.goNextMonth(calendar);}
obj.onblur = function ()...{calendar.onblur();}
this.nextMonth= obj;



obj = this.getElementById("calendarClear");
obj.onclick = function ()...{calendar.dateControl.value = "";calendar.hide();}
this.calendarClear = obj;

obj = this.getElementById("calendarClose");
obj.onclick = function ()...{calendar.hide();}
this.calendarClose = obj;

obj = this.getElementById("calendarYear");
obj.onchange = function ()...{calendar.update(calendar);}
obj.onblur = function ()...{calendar.onblur();}
this.calendarYear = obj;

obj = this.getElementById("calendarMonth");
with(obj)
...{
    onchange = function ()...{calendar.update(calendar);}
    onblur = function ()...{calendar.onblur();}
}this.calendarMonth = obj;

obj = this.getElementById("calendarToday");
obj.onclick = function ()...{
    var today = new Date();
    calendar.date = today;
    calendar.year = today.getFullYear();
    calendar.month = today.getMonth();
    calendar.changeSelect();
    calendar.bindData();
    calendar.dateControl.value = today.format(calendar.dateFormatStyle);
    calendar.hide();
}
this.calendarToday = obj;
}

// 年份下拉框绑定数据
Calendar.prototype.bindYear  =   function () ... {
var cy = this.calendarYear;
cy.length = 0;
for (var i = this.beginYear; i <= this.endYear; i++)...{
    cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i);
}
}

// 月份下拉框绑定数据
Calendar.prototype.bindMonth  =   function () ... {
var cm = this.calendarMonth;
cm.length = 0;
for (var i = 0; i < 12; i++)...{
    cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i);
}
}

// 向前一月
Calendar.prototype.goPrevMonth  =   function (e) ... {
if (this.year == this.beginYear && this.month == 0)...{return;}
this.month--;
if (this.month == -1)...{
    this.year--;
    this.month = 11;
}
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
}

// 向后一月
Calendar.prototype.goNextMonth  =   function (e) ... {
if (this.year == this.endYear && this.month == 11)...{return;}
this.month++;
if (this.month == 12)...{
    this.year++;
    this.month = 0;
}
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
}

// 改变SELECT选中状态
Calendar.prototype.changeSelect  =   function () ... {
var cy = this.calendarYear;
var cm = this.calendarMonth;
for (var i= 0; i < cy.length; i++)...{
    if (cy.options[i].value == this.date.getFullYear())...{
      cy[i].selected = true;
      break;
    }
}
for (var i= 0; i < cm.length; i++)...{
    if (cm.options[i].value == this.date.getMonth())...{
      cm[i].selected = true;
      break;
    }
}
}

// 更新年、月
Calendar.prototype.update  =   function  (e) ... {
this.year = e.calendarYear.options[e.calendarYear.selectedIndex].value;
this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value;
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
}

// 绑定数据到月视图
Calendar.prototype.bindData  =   function  () ... {
var calendar = this;
var dateArray = this.getMonthViewArray(this.date.getFullYear(), this.date.getMonth());
var tds = this.getElementById("calendarTable").getElementsByTagName("td");
for(var i = 0; i < tds.length; i++)...{
tds[i].style.backgroundColor = calendar.colors["td_bg_out"];
    tds[i].onclick = function () ...{return;}
    tds[i].onmouseover = function () ...{return;}
    tds[i].onmouseout = function () ...{return;}
    if (i > dateArray.length - 1) break;
    tds[i].innerHTML = dateArray[i];
    if (dateArray[i] != "&nbsp;")...{
      tds[i].onclick = function () ...{
        if (calendar.dateControl != null)...{
          calendar.dateControl.value = new Date(calendar.date.getFullYear(),
                                                calendar.date.getMonth(),
                                                this.innerHTML).format(calendar.dateFormatStyle);
        }
        calendar.hide();
      }
      tds[i].onmouseover = function () ...{
        this.style.backgroundColor = calendar.colors["td_bg_over"];
      }
      tds[i].onmouseout = function () ...{
        this.style.backgroundColor = calendar.colors["td_bg_out"];
      }
      if (new Date().format(calendar.dateFormatStyle) ==
          new Date(calendar.date.getFullYear(),
                   calendar.date.getMonth(),
                   dateArray[i]).format(calendar.dateFormatStyle)) ...{
        tds[i].style.backgroundColor = calendar.colors["cur_bg"];
        tds[i].onmouseover = function () ...{
          this.style.backgroundColor = calendar.colors["td_bg_over"];
        }
        tds[i].onmouseout = function () ...{
          this.style.backgroundColor = calendar.colors["cur_bg"];
        }
      }//end if
      
      //设置已被选择的日期单元格背影色
      if (calendar.dateControl != null && calendar.dateControl.value == new Date(calendar.date.getFullYear(),
                   calendar.date.getMonth(),
                   dateArray[i]).format(calendar.dateFormatStyle)) ...{
        tds[i].style.backgroundColor = calendar.colors["sel_bg"];
        tds[i].onmouseover = function () ...{
          this.style.backgroundColor = calendar.colors["td_bg_over"];
        }
        tds[i].onmouseout = function () ...{
          this.style.backgroundColor = calendar.colors["sel_bg"];
        }
      }
    }
}
}

// 根据年、月得到月视图数据(数组形式)
Calendar.prototype.getMonthViewArray  =   function  (y, m)  ... {
var mvArray = [];
var dayOfFirstDay = new Date(y, m, 1).getDay();
var daysOfMonth = new Date(y, m + 1, 0).getDate();
for (var i = 0; i < 42; i++) ...{
    mvArray[i] = "&nbsp;";
}
for (var i = 0; i < daysOfMonth; i++)...{
    mvArray[i + dayOfFirstDay] = i + 1;
}
return mvArray;
}

// 扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source
Calendar.prototype.getElementById  =   function (id) ... {
if (typeof(id) != "string" || id == "") return null;
if (document.getElementById) return document.getElementById(id);
if (document.all) return document.all(id);
try ...{return eval(id);} catch(e)...{ return null;}
}

// 扩展 object.getElementsByTagName(tagName)
Calendar.prototype.getElementsByTagName  =   function (object, tagName) ... {
if (document.getElementsByTagName) return document.getElementsByTagName(tagName);
if (document.all) return document.all.tags(tagName);
}

// 取得HTML控件绝对位置
Calendar.prototype.getAbsPoint  =   function  (e) ... {
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent)...{
    x += e.offsetLeft;
    y += e.offsetTop;
}
return ...{"x": x, "y": y};
}

// 显示日历
Calendar.prototype.show  =   function  (dateObj, popControl)  ... {
if (dateObj == null)...{
    throw new Error("arguments[0] is necessary")
}
this.dateControl = dateObj;

this.date = (dateObj.value.length > 0) ? new Date(dateObj.value.toDate(this.dateFormatStyle)) : new Date() ;//若为空则显示当前月份
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.changeSelect();
this.bindData();
if (popControl == null)...{
    popControl = dateObj;
}
var xy = this.getAbsPoint(popControl);
this.panel.style.left = xy.x -25 + "px";
this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px";

this.panel.style.display = "";
this.container.style.display = "";

dateObj.onblur = function()...{calendar.onblur();}
this.container.onmouseover = function()...{isFocus=true;}
this.container.onmouseout = function()...{isFocus=false;}
}

// 隐藏日历
Calendar.prototype.hide  =   function ()  ... {
this.panel.style.display = "none";
this.container.style.display = "none";
isFocus=false;
}

// 焦点转移时隐藏日历
Calendar.prototype.onblur  =   function ()  ... {
    if(!isFocus)...{this.hide();}
}
document.write( ' <div id="ContainerPanel" style="display:none;"><div id="calendarPanel" style="position: absolute;display: none;z-index: 9999; ' );
document.write( ' background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;margin-left:25px;"></div> ' );
if (document.all)
... {
document.write('<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);');
document.write('height:expression(this.previousSibling.offsetHeight);');
document.write('left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);');
document.write('display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>');
}
document.write( ' </div> ' );
// --> 

 

2。建立一个网页,如aa.html。注意和Calendar.js放在同一目录下

 

< script  src ="Calendar.js"  type ="text/javascript"  language ="javascript" ></ script >

< input  name ="txtDate"  type ="text"  style ="padding-left:5px;"  size ="10"  id ="txtDate"  onclick ="SelectDate(this)"  readonly ="readonly"   />

第二种方案，梅花雪

1。建立一个JS文件：Calendar.js

<!--
document.write( " <div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'> " );
document.write( " <iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div> " );
function  writeIframe()
... {
    var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+
    "*{font-size: 12px; font-family: 宋体}"+
    ".bg{  color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+
    "table#tableMain{ width: 142; height: 180;}"+
    "table#tableWeek td{ color: "+ WebCalendar.lightColor +";}"+
    "table#tableDay  td{ font-weight: bold;}"+
    "td#meizzYearHead, td#meizzYearMonth{color: "+ WebCalendar.wordColor +"}"+
    ".out { text-align: center; border-top: 1px solid "+ WebCalendar.DarkBorder +"; border-left: 1px solid "+ WebCalendar.DarkBorder +";"+
    "border-right: 1px solid "+ WebCalendar.lightColor +"; border-bottom: 1px solid "+ WebCalendar.lightColor +";}"+
    ".over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;"+
    "border-bottom: 1px solid "+ WebCalendar.DarkBorder +"; border-right: 1px solid "+ WebCalendar.DarkBorder +"}"+
    "input{ border: 1px solid "+ WebCalendar.darkColor +"; padding-top: 1px; height: 18; cursor: hand;"+
    "       color:"+ WebCalendar.wordColor +"; background-color: "+ WebCalendar.btnBgColor +"}"+
    "</style></head><body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'><form name=meizz>";

    if (WebCalendar.drag)...{ strIframe += "<scr"+"ipt language=javascript>"+
    "var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+
    "if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+
    "o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+
    "o.style.top  = parseInt(o.style.top)  + window.event.clientY-cy;}}"+
    "function document.onkeydown(){ switch(window.event.keyCode){  case 27 : parent.hiddenCalendar(); break;"+
    "case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+
    "case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;}"+
    "function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr"+"ipt>"}

    strIframe += "<select name=tmpYearSelect  onblur='parent.hiddenSelect(this)' style='z-index:1;position:absolute;top:3;left:18;display:none'"+
    " onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
    "<select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:3;left:74;display:none'"+
    " onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+

    "<table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0>"+
    "<tr><td width=140 height=19 bgcolor='"+ WebCalendar.lightColor +"'>"+
    "    <table width=140 id=tableHead border=0 cellspacing=1 cellpadding=0><tr align=center>"+
    "    <td width=15 height=19 class=bg title='向前翻 1 月&#13;快捷键：←' style='cursor: hand' onclick='parent.prevM()'><b>&lt;</b></td>"+
    "    <td width=60 id=meizzYearHead  title='点击此处选择年份' onclick='parent.funYearSelect(parseInt(this.innerText, 10))'"+
    "        onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
    "        onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
    "    <td width=50 id=meizzYearMonth title='点击此处选择月份' onclick='parent.funMonthSelect(parseInt(this.innerText, 10))'"+
    "        onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
    "        onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
    "    <td width=15 class=bg title='向后翻 1 月&#13;快捷键：→' onclick='parent.nextM()' style='cursor: hand'><b>&gt;</b></td></tr></table>"+
    "</td></tr><tr><td height=20><table id=tableWeek border=1 width=140 cellpadding=0 cellspacing=0 ";
    if(WebCalendar.drag)...{strIframe += "onmousedown='dragStart()' onmouseup='drag=false' onmouseout='drag=false'";}
    strIframe += " borderColorLight='"+ WebCalendar.darkColor +"' borderColorDark='"+ WebCalendar.lightColor +"'>"+
    "    <tr align=center><td height=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>"+
    "</td></tr><tr><td valign=top width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
    "    <table id=tableDay height=120 width=140 border=0 cellspacing=1 cellpadding=0>";
         for(var x=0; x<5; x++)...{ strIframe += "<tr>";
         for(var y=0; y<7; y++)  strIframe += "<td class=out id='meizzDay"+ (x*7+y) +"'></td>"; strIframe += "</tr>";}
         strIframe += "<tr>";
         for(var x=35; x<39; x++) strIframe += "<td class=out id='meizzDay"+ x +"'></td>";
         strIframe +="<td colspan=3 class=out title='"+ WebCalendar.regInfo +"'><input style=' background-color: "+
         WebCalendar.btnBgColor +";cursor: hand; padding-top: 4px; width: 100%; height: 100%; border: 0' onfocus='this.blur()'"+
         " type=button value='&nbsp; &nbsp; 关闭' onclick='parent.hiddenCalendar()'></td></tr></table>"+
    "</td></tr><tr><td height=20 width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
    "    <table border=0 cellpadding=1 cellspacing=0 width=140>"+
    "    <tr><td><input name=prevYear title='向前翻 1 年&#13;快捷键：↑' onclick='parent.prevY()' type=button value='&lt;&lt;'"+
    "    onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input"+
    "    onfocus='this.blur()' name=prevMonth title='向前翻 1 月&#13;快捷键：←' onclick='parent.prevM()' type=button value='&lt;&nbsp;'>"+
    "    </td><td align=center><input name=today type=button value='Today' onfocus='this.blur()' style='width: 50' title='当前日期&#13;快捷键：T'"+
    "    onclick="parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())">"+
    "    </td><td align=right><input title='向后翻 1 月&#13;快捷键：→' name=nextMonth onclick='parent.nextM()' type=button value='&nbsp;&gt;'"+
    "    onfocus='this.blur()'><input name=nextYear title='向后翻 1 年&#13;快捷键：↓' onclick='parent.nextY()' type=button value='&gt;&gt;'"+
    "    onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>"+
    "</td></tr><table></form></body></html>";
    with(WebCalendar.iframe)
    ...{
        document.writeln(strIframe); document.close();
        for(var i=0; i<39; i++)
        ...{
            WebCalendar.dayObj[i] = eval("meizzDay"+ i);
            WebCalendar.dayObj[i].onmouseover = dayMouseOver;
            WebCalendar.dayObj[i].onmouseout  = dayMouseOut;
            WebCalendar.dayObj[i].onclick     = returnDate;
        }
    }
}
function  WebCalendar()  // 初始化日历的设置
... {
    this.regInfo    = "WEB Calendar ver 3.0&#13;作者：meizz(梅花雪疏影横斜)&#13;网站：http://www.meizz.com/&#13;关闭的快捷键：[Esc]";
    this.regInfo   += "&#13;&#13;Ver 2.0：walkingpoison(水晶龙)&#13;Ver 1.0：meizz(梅花雪疏影横斜)";
    this.daysMonth  = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    this.day        = new Array(39);            //定义日历展示用的数组
    this.dayObj     = new Array(39);            //定义日期展示控件数组
    this.dateStyle  = null;                     //保存格式化后日期数组
    this.objExport  = null;                     //日历回传的显示控件
    this.eventSrc   = null;                     //日历显示的触发控件
    this.inputDate  = null;                     //转化外的输入的日期(d/m/yyyy)
    this.thisYear   = new Date().getFullYear(); //定义年的变量的初始值
    this.thisMonth  = new Date().getMonth()+ 1; //定义月的变量的初始值
    this.thisDay    = new Date().getDate();     //定义日的变量的初始值
    this.today      = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear;   //今天(d/m/yyyy)
    this.iframe     = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
    this.calendar   = getObjectById("meizzCalendarLayer");  //日历的层
    this.dateReg    = "";           //日历格式验证的正则式

    this.yearFall   = 50;           //定义年下拉框的年差值
    this.format     = "yyyy-mm-dd"; //回传日期的格式
    this.timeShow   = false;        //是否返回时间
    this.drag       = true;         //是否允许拖动
    this.darkColor  = "#FF6347";    //控件的暗色
    this.lightColor = "#FFFFFF";    //控件的亮色
    this.btnBgColor = "#FFF5A0";    //控件的按钮背景色
    this.wordColor  = "#000040";    //控件的文字颜色
    this.wordDark   = "#DCDCDC";    //控件的暗文字颜色
    this.dayBgColor = "#FFFACD";    //日期数字背景色
    this.todayColor = "#FF9933";    //今天在日历上的标示背景色
    this.DarkBorder = "#FFE4C4";    //日期显示的立体表达色
}     var  WebCalendar  =   new  WebCalendar();

function  calendar()  // 主调函数
... {
    var e = window.event.srcElement;   writeIframe();
    var o = WebCalendar.calendar.style; WebCalendar.eventSrc = e;
 if (arguments.length == 0) WebCalendar.objExport = e;
    else WebCalendar.objExport = eval(arguments[0]);

    WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? "move" : "default";
 var t = e.offsetTop,  h = e.clientHeight, l = e.offsetLeft, p = e.type;
 while (e = e.offsetParent)...{t += e.offsetTop; l += e.offsetLeft;}
    o.display = ""; WebCalendar.iframe.document.body.focus();
    var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight;
    var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;
    
    if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6;
    else o.top  = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;
    if (dw + dl - l >= cw) o.left = l; else o.left = (dw >= cw) ? dw - cw + dl : dl;

    if  (!WebCalendar.timeShow) WebCalendar.dateReg = /^(d...{1,4})(-|/|.)(d...{1,2})2(d...{1,2})$/;
    else WebCalendar.dateReg = /^(d...{1,4})(-|/|.)(d...{1,2})2(d...{1,2}) (d...{1,2}):(d...{1,2}):(d...{1,2})$/;

    try...{
        if (WebCalendar.objExport.value.trim() != "")...{
            WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);
            if (WebCalendar.dateStyle == null)
            ...{
                WebCalendar.thisYear   = new Date().getFullYear();
                WebCalendar.thisMonth  = new Date().getMonth()+ 1;
                WebCalendar.thisDay    = new Date().getDate();
                alert("原文本框里的日期有错误！可能与你定义的显示时分秒有冲突！");
                writeCalendar(); return false;
            }
            else
            ...{
                WebCalendar.thisYear   = parseInt(WebCalendar.dateStyle[1], 10);
                WebCalendar.thisMonth  = parseInt(WebCalendar.dateStyle[3], 10);
                WebCalendar.thisDay    = parseInt(WebCalendar.dateStyle[4], 10);
                WebCalendar.inputDate  = parseInt(WebCalendar.thisDay, 10) +"/"+ parseInt(WebCalendar.thisMonth, 10) +"/"+ 
                parseInt(WebCalendar.thisYear, 10); writeCalendar();
            }
        }  else writeCalendar();
    }  catch(e)...{writeCalendar();}
}
function  funMonthSelect()  // 月份的下拉框
... {
    var m = isNaN(parseInt(WebCalendar.thisMonth, 10)) ? new Date().getMonth() + 1 : parseInt(WebCalendar.thisMonth);
    var e = WebCalendar.iframe.document.forms[0].tmpMonthSelect;
    for (var i=1; i<13; i++) e.options.add(new Option(i +"月", i));
    e.style.display = ""; e.value = m; e.focus(); window.status = e.style.top;
}
function  funYearSelect()  // 年份的下拉框
... {
    var n = WebCalendar.yearFall;
    var e = WebCalendar.iframe.document.forms[0].tmpYearSelect;
    var y = isNaN(parseInt(WebCalendar.thisYear, 10)) ? new Date().getFullYear() : parseInt(WebCalendar.thisYear);
        y = (y <= 1000)? 1000 : ((y >= 9999)? 9999 : y);
    var min = (y - n >= 1000) ? y - n : 1000;
    var max = (y + n <= 9999) ? y + n : 9999;
        min = (max == 9999) ? max-n*2 : min;
        max = (min == 1000) ? min+n*2 : max;
    for (var i=min; i<=max; i++) e.options.add(new Option(i +"年", i));
    e.style.display = ""; e.value = y; e.focus();
}
function  prevM()   // 往前翻月份
... {
    WebCalendar.thisDay = 1;
    if (WebCalendar.thisMonth==1)
    ...{
        WebCalendar.thisYear--;
        WebCalendar.thisMonth=13;
    }
    WebCalendar.thisMonth--; writeCalendar();
}
function  nextM()   // 往后翻月份
... {
    WebCalendar.thisDay = 1;
    if (WebCalendar.thisMonth==12)
    ...{
        WebCalendar.thisYear++;
        WebCalendar.thisMonth=0;
    }
    WebCalendar.thisMonth++; writeCalendar();
}
function  prevY() ... {WebCalendar.thisDay = 1; WebCalendar.thisYear--; writeCalendar();} // 往前翻 Year
function  nextY() ... {WebCalendar.thisDay = 1; WebCalendar.thisYear++; writeCalendar();} // 往后翻 Year
function  hiddenSelect(e) ... {for(var i=e.options.length; i>-1; i--)e.options.remove(i); e.style.display="none";}
function  getObjectById(id) ... { if(document.all) return(eval("document.all."+ id)); return(eval(id)); }
function  hiddenCalendar() ... {getObjectById("meizzCalendarLayer").style.display = "none";} ;
function  appendZero(n) ... {return(("00"+ n).substr(("00"+ n).length-2));} // 日期自动补零程序
function  String.prototype.trim() ... {return this.replace(/(^s*)|(s*$)/g,"");}
function  dayMouseOver()
... {
    this.className = "over";
    this.style.backgroundColor = WebCalendar.darkColor;
    if(WebCalendar.day[this.id.substr(8)].split("/")[1] == WebCalendar.thisMonth)
    this.style.color = WebCalendar.lightColor;
}
function  dayMouseOut()
... {
    this.className = "out"; var d = WebCalendar.day[this.id.substr(8)], a = d.split("/");
    this.style.removeAttribute('backgroundColor');
    if(a[1] == WebCalendar.thisMonth && d != WebCalendar.today)
    ...{
        if(WebCalendar.dateStyle && a[0] == parseInt(WebCalendar.dateStyle[4], 10))
        this.style.color = WebCalendar.lightColor;
        this.style.color = WebCalendar.wordColor;
    }
}
function  writeCalendar()  // 对日历显示的数据的处理程序
... {
    var y = WebCalendar.thisYear;
    var m = WebCalendar.thisMonth; 
    var d = WebCalendar.thisDay;
    WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28;
    if (!(y<=9999 && y >= 1000 && parseInt(m, 10)>0 && parseInt(m, 10)<13 && parseInt(d, 10)>0))...{
        alert("对不起，你输入了错误的日期！");
        WebCalendar.thisYear   = new Date().getFullYear();
        WebCalendar.thisMonth  = new Date().getMonth()+ 1;
        WebCalendar.thisDay    = new Date().getDate(); }
    y = WebCalendar.thisYear;
    m = WebCalendar.thisMonth;
    d = WebCalendar.thisDay;
    WebCalendar.iframe.meizzYearHead.innerText  = y +" 年";
    WebCalendar.iframe.meizzYearMonth.innerText = parseInt(m, 10) +" 月";
    WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28; //闰年二月为29天
    var w = new Date(y, m-1, 1).getDay();
    var prevDays = m==1  ? WebCalendar.daysMonth[11] : WebCalendar.daysMonth[m-2];
    for(var i=(w-1); i>=0; i--) //这三个 for 循环为日历赋数据源（数组 WebCalendar.day）格式是 d/m/yyyy
    ...{
        WebCalendar.day[i] = prevDays +"/"+ (parseInt(m, 10)-1) +"/"+ y;
        if(m==1) WebCalendar.day[i] = prevDays +"/"+ 12 +"/"+ (parseInt(y, 10)-1);
        prevDays--;
    }
    for(var i=1; i<=WebCalendar.daysMonth[m-1]; i++) WebCalendar.day[i+w-1] = i +"/"+ m +"/"+ y;
    for(var i=1; i<39-w-WebCalendar.daysMonth[m-1]+1; i++)
    ...{
        WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ (parseInt(m, 10)+1) +"/"+ y;
        if(m==12) WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ 1 +"/"+ (parseInt(y, 10)+1);
    }
    for(var i=0; i<39; i++)    //这个循环是根据源数组写到日历里显示
    ...{
        var a = WebCalendar.day[i].split("/");
        WebCalendar.dayObj[i].innerText    = a[0];
        WebCalendar.dayObj[i].title        = a[2] +"-"+ appendZero(a[1]) +"-"+ appendZero(a[0]);
        WebCalendar.dayObj[i].bgColor      = WebCalendar.dayBgColor;
        WebCalendar.dayObj[i].style.color  = WebCalendar.wordColor;
        if ((i<10 && parseInt(WebCalendar.day[i], 10)>20) || (i>27 && parseInt(WebCalendar.day[i], 10)<12))
            WebCalendar.dayObj[i].style.color = WebCalendar.wordDark;
        if (WebCalendar.inputDate==WebCalendar.day[i])    //设置输入框里的日期在日历上的颜色
        ...{WebCalendar.dayObj[i].bgColor = WebCalendar.darkColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}
        if (WebCalendar.day[i] == WebCalendar.today)      //设置今天在日历上反应出来的颜色
        ...{WebCalendar.dayObj[i].bgColor = WebCalendar.todayColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}
    }
}
function  returnDate()  // 根据日期格式等返回用户选定的日期
... {
    if(WebCalendar.objExport)
    ...{
        var returnValue;
        var a = (arguments.length==0) ? WebCalendar.day[this.id.substr(8)].split("/") : arguments[0].split("/");
        var d = WebCalendar.format.match(/^(w...{4})(-|/|.|)(w...{1,2})2(w...{1,2})$/);
        if(d==null)...{alert("你设定的日期输出格式不对！ 请重新定义 WebCalendar.format ！"); return false;}
        var flag = d[3].length==2 || d[4].length==2; //判断返回的日期格式是否要补零
        returnValue = flag ? a[2] +d[2]+ appendZero(a[1]) +d[2]+ appendZero(a[0]) : a[2] +d[2]+ a[1] +d[2]+ a[0];
        if(WebCalendar.timeShow)
        ...{
            var h = new Date().getHours(), m = new Date().getMinutes(), s = new Date().getSeconds();
            returnValue += flag ? " "+ appendZero(h) +":"+ appendZero(m) +":"+ appendZero(s) : " "+  h  +":"+ m +":"+ s;
        }
        WebCalendar.objExport.value = returnValue;
        hiddenCalendar();
    }
}
function  document.onclick()
... {
    if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
}
// --> 

2。建立一个网页,如aa.html。注意和Calendar.js放在同一目录下

 

< script src = " Calendar.js "  type = " text/javascript "  language = " javascript " ></ script >
< script language = " JavaScript " >
<!--
     // 注：下面这段日历定制的 JavaScript 代码你可以一个都不定义，使用其默认值
    WebCalendar.yearFall    =   50 ;            // 定义年下拉框的年差值
    WebCalendar.format      =   " yyyy-mm-dd "   |   " 2003-06-07 " ;  // 回传日期的格式
    WebCalendar.timeShow    =   false   |   true ;  // 是否返回时间
    WebCalendar.drag        =   true    |   false ; // 是否允许拖动
    WebCalendar.darkColor   =   " #0000D0 " ;     // 控件的暗色
    WebCalendar.lightColor  =   " #FFFFFF " ;     // 控件的亮色
    WebCalendar.btnBgColor  =   " #FFFFF5 " ;     // 控件的按钮背景色
    WebCalendar.wordColor   =   " #000080 " ;     // 控件的文字颜色
    WebCalendar.wordDark    =   " #DCDCDC " ;     // 控件的暗文字颜色
    WebCalendar.dayBgColor  =   " #E6E6FA " ;     // 日期数字背景色
    WebCalendar.todayColor  =   " #FF0000 " ;     // 今天在日历上的标示背景色
    WebCalendar.DarkBorder  =   " #D4D0C8 " ;     // 日期显示的立体表达色
   // --></script>

< input name = txt onfocus = " calendar() "  runat = " server " >

 

3.附带梅花雪的相关说明

调用日历的代码示例第一种调用方法： 

代码：<input onfocus="calendar()">

  第二种调用方法： 

代码：<input name="txt" onfocus="calendar()"><input type=button value=calendar onclick="calendar(document.form1.txt)"> 

对日历控件的定制

	定义年下拉框的年跨值（两倍）		定义返回的日期格式（可以用数字，分隔符 - /）
	定义是否返回时分秒		定义控件是否能被拖动
	控件的暗色		控件的亮色
	控件的按钮背景色		控件的文字颜色
	控件的暗文字颜色		日期数字背景色
	今天在日历上的标示背景色		日期显示的立体表达色

 

自定义函数名及其说明

函数名	函数的用途说明（在主页面里自定义函数时请不要与以下的函数名冲突）
calendar()	用户的主调函数
writeIframe()	对iframe进行初始化
WebCalendar()	初始化日历的设置
funMonthSelect()	月份的下拉框
funYearSelect()	年份的下拉框
prevM()	往前翻月份
nextM()	往后翻月份
prevY()	往前翻 Year
nextY()	往后翻 Year
hiddenSelect()	隐藏年份与月份的下拉框
hiddenCalendar()	隐藏日历控件
appendZero(n)	日期自动补零程序
dayMouseOver()	日历里日期的 onmouseover 事件
dayMouseOut()	日历里日期的 onmouseout  事件
writeCalendar()	对日历显示数据的核心处理程序
returnDate()	根据日期格式等返回用户选定的日期
document.onclick()	if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar(); 若你要使用主网页的 document.onclick() 事件时，请加上上面这句代码（这句代码日历控件里已存在）， 这句代码是当你点击日历以外的地方时日历自动关闭，若不使用 document.onclick() 事件就不需要再定义了．
全局变量　WebCalendar	日历控件的实例，你可以通过它对日历进行定制