默写js日历控件和详细注释（非原创 原作者：@author KimSoft (jinqinghua [at] gmail.com)
2013-09-08 23:49
387 查看
一直对日历控件很感兴趣，感觉很深奥的东西，最近也在努力学习js，看了几本js的经典入门书籍，看完就忘了，就想着看了看
其他大牛写得日历控件，看完了自己尝试着按照他们的思路写了一个，基本算是默背下来的吧，虽然不是原创，但从
里面学到的东西以及对js更进一步的了解还是很有好处的。
为了方便对日历控件比较陌生的同学，我把每一步的思路和作用都详细注释一遍吧
思路: 1、声明calendar对象，并初始化一些属性。
2、根据不同的语言定义了几组对应的变量，而且由于这是不变的，比如月份，周几等，作者把他
们声明为了静态变量（也就是对象的属性）（我感觉这是值得我们学习的一种创新）
3、开始画日历表格，以前我一直很诧异这个控件是怎么做到点击下一月上一月时日历表格和表格里的内容动态生成的，
原来是先画出表格，当改变月份时，表格其实没变，只是td里的内容变了。亮点在于把表现和内容分离了就像css和html分开的
原理一样。
4、画完表格后，为表格内的select或td添加内容
5、为表格里的每个元素添加事件，当其中的某个事件触发时，改变全局变量date、year、month的值，让表格内容跟着进行变化
原作者：@author KimSoft (jinqinghua [at] gmail.com)
此控件暂时不支持ie
//算是calendar对象的构造函数吧
function Calendar(beginYear, endYear, language){
this.beginYear = beginYear || 1970 ;//这是js菜鸟值得学习的声明变量的方式，当需要给某变量设置默认值时此方式很nb
this.endYear = endYear || 2020;
this.language = language || 0;
this.dateControl = null; //dateControl是我们绑定的页面text，用于输出我们选择的时间
this.panel = this.getElementById("__calendarPanel");//装日历的容器，便于以后日历弹出时定位日历的位置
this.iframe = window.frames["__calendarIframe"];
this.form = null;
//找出当前日期的年月日并存于变量中，方便以后在点击上月下月时使用这些值，这些是全局变量，当他们的值改变时，这些变量保存这些值的最后状态，以便日期表格里的内容跟着进行改变。
this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.colors = {"bg_cur_day":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"}//鼠标移到某日期时背景色变化
}
//把不变更的变量放到静态变量，以下这些编码我看不懂直接copy过来的，但我们必须明白的是这些都是为了在不同语言环境不产生乱码
Calendar.language = {
"year" : ["\u5e74", "", "", "\u5e74"],
"months" : [
["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"]
],
"weeks" : [["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"],
["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"]
],
"clear" : ["\u6e05\u7a7a", "Clear", "Clear", "\u6e05\u7a7a"],
"today" : ["\u4eca\u5929", "Today", "Today", "\u4eca\u5929"],
"close" : ["\u5173\u95ed", "Close", "Close", "\u95dc\u9589"]
}
//为calendar类添加公共方法draw，此方法是画出存放日期的表格
Calendar.prototype.draw = function(){
calendar = this; // ？改变this的值 一直没明白这句话的用途是什么，可能是为了保证this指代一个calendar对象吧，我把这句话注掉了对控件没影响
求解
//声明一个数组，存放表格的html，感觉作者用cs[cs.length]为数组动态添加元素，这值得我们这些新手学习
var _cs = [];
_cs[_cs.length] = '<form id="__calendarForm" name="__calendarForm" method="post">';
_cs[_cs.length] = '<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">';
_cs[_cs.length] = ' <tr>';
_cs[_cs.length] = ' <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="<" \/><\/th>';
_cs[_cs.length] = ' <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"><\/select><select class="month" name="monthSelect" id="monthSelect"><\/select><\/th>';
_cs[_cs.length] = ' <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value=">" \/><\/th>';
_cs[_cs.length] = ' <\/tr>';
_cs[_cs.length] = ' <tr>';
for(var i = 0; i < 7; i++) {
_cs[_cs.length] = '<th class="theader">';
_cs[_cs.length] = Calendar.language["weeks"][this.language][i];
_cs[_cs.length] = '<\/th>';
}
_cs[_cs.length] = '<\/tr>';
for(var i = 0; i < 6; i++){
_cs[_cs.length] = '<tr align="center">';
for(var j = 0; j < 7; j++) {
switch (j) {
case 0: _cs[_cs.length] = '<td class="sun"> <\/td>'; break;
case 6: _cs[_cs.length] = '<td class="sat"> <\/td>'; break;
default:_cs[_cs.length] = '<td class="normal"> <\/td>'; break;
}
}
_cs[_cs.length] = '<\/tr>';
}
_cs[_cs.length] = ' <tr>';
_cs[_cs.length] = ' <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" \/><\/th>';
_cs[_cs.length] = ' <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" \/><\/th>';
_cs[_cs.length] = ' <th colspan="4"><input type="button" class="b" name="closeButton" id="closeButton" \/><\/th>';
_cs[_cs.length] = ' <\/tr>';
_cs[_cs.length] = '<\/table>';
_cs[_cs.length] = '<\/form>';
this.iframe.document.body.innerHTML = _cs.join("");
this.form = this.iframe.document.forms["__calendarForm"];
this.form.clearButton.value = Calendar.language["clear"][this.language];
this.form.selectTodayButton.value = Calendar.language["today"][this.language];
this.form.closeButton.value = Calendar.language["close"][this.language];
//为日历控件上的按钮或select添加事件
this.form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth(this);}
this.form.goNextMonthButton.onclick = function () {calendar.goNextMonth(this);}
this.form.yearSelect.onchange = function () {calendar.update(this);}
this.form.monthSelect.onchange = function () {calendar.update(this);}
this.form.clearButton.onclick = function () {calendar.dateControl.value = "";calendar.hide();}
this.form.closeButton.onclick = function () {calendar.hide();}
this.form.selectTodayButton.onclick = function () {
var today = new Date();
calendar.date = today;
calendar.year = today.getFullYear();
calendar.month = today.getMonth();
calendar.dateControl.value = today.format('yyyy-MM-dd');
calendar.hide();
}
}
//为calendar类添加公共方法：bindYear()用于为年份select选择框赋值
Calendar.prototype.bindYear = function(){
var ys = this.form.yearSelect;
ys.length = 0;
for (var i = this.beginYear; i <= this.endYear; i++){
ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i);
}
}
//为calendar类添加公共方法：bindMonth()用于为月份select选择框赋值
Calendar.prototype.bindMonth = function() {
var ms = this.form.monthSelect;
ms.length = 0;
for (var i = 0; i < 12; i++){
ms.options[ms.length] = new Option(Calendar.language["months"][this.language][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();
};
//当改变了月份和年份时调用此方法，根据改变后的this.date的值设置选择框的选中项，注意这里并没有改变每个td里的值，此方法
//只负责改变选项框，这就是面向对象的体现：每个方法只负责自己的部分，不越俎代庖，很优雅，一个功能实现需要多喝方法的配合
Calendar.prototype.changeSelect = function() {
var ys = this.form.yearSelect;
var ms = this.form.monthSelect;
for (var i= 0; i < ys.length; i++){
if (ys.options[i].value == this.date.getFullYear()){
ys[i].selected = true;
break;
}
}
for (var i= 0; i < ms.length; i++){
if (ms.options[i].value == this.date.getMonth()){
ms[i].selected = true;
break;
}
}
};
//改变select的value调用的方法，改变了value那么对应的年和月就得跟着改变，要不下面的td不会刷新内容
Calendar.prototype.update = function (e){
this.year = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value;
this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value;
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
};
//重点方法：为没个td设置value
Calendar.prototype.bindData = function () {
var calendar = this;
var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());
var tds = this.getElementsByTagName_r("td", this.getElementById("__calendarTable", this.iframe.document));//找到所有的td
for(var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = calendar.colors["bg_over"];
tds[i].onclick = null;
tds[i].onmouseover = null;
tds[i].onmouseout = null;
tds[i].innerHTML = dateArray[i] || " ";
if (i > dateArray.length - 1) continue;
if (dateArray[i]){
tds[i].onclick = function () {
if (calendar.dateControl){
calendar.dateControl.value = new Date(calendar.date.getFullYear(),
calendar.date.getMonth(),
this.innerHTML).format('yyyy-MM-dd');
}
calendar.hide();
}
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_over"];}
var today = new Date();
if (today.getFullYear() == calendar.date.getFullYear()) {
if (today.getMonth() == calendar.date.getMonth()) {
if (today.getDate() == dateArray[i]) {
tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}
}
}
}
}//end if
}//end for
};
//看似简单的一个方法，却是表格内容能正确变化的保证，以前一直很纳闷究竟怎么能做到闰年2月29天以及怎么确定每天是星期几
//以为用了什么算法，其实就是这么个简单却实用的方法就能搞定。我感觉这个方法是核心
Calendar.prototype.getMonthViewDateArray = function (y, m) {
var dateArray = new Array(42);
var dayOfFirstDate = new Date(y, m, 1).getDay(); //得到某年某月的第一天是星期几
var dateCountOfMonth = new Date(y, m + 1, 0).getDate(); //得到下个月的第0天的号数，用于确定上个月的天数
for (var i = 0; i < dateCountOfMonth; i++) {
dateArray[i + dayOfFirstDate] = i + 1;
}
return dateArray;
};
//此日历控件的入口方法，此方法用于调出控件，并且初始化控件内容和控件的位置dateControl用于表示显示日期的输入框
Calendar.prototype.show = function (dateControl, popuControl) {
if (this.panel.style.visibility == "visible") {
this.panel.style.visibility = "hidden";
}
if (!dateControl){
throw new Error("arguments[0] is necessary!")
}
this.dateControl = dateControl;
popuControl = popuControl || dateControl;
this.draw();
this.bindYear();
this.bindMonth();
if (dateControl.value.length > 0){
this.date = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
this.changeSelect();
this.bindData();
var xy = this.getAbsPoint(popuControl);
this.panel.style.left = xy.x + "px";
this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";
this.panel.style.visibility = "visible";
};
Calendar.prototype.hide = function() {
this.panel.style.visibility = "hidden";
};
//个人感觉，对于遵守dom规则的应用下面两个方法作用不大
Calendar.prototype.getElementById = function(id, object){
object = object || document;
return document.getElementByIdx_x_x_x ? object.getElementById(id) : document.all(id);
};
Calendar.prototype.getElementsByTagName = function(tagName, object){
object = object || document;
return document.getElementsByTagName ? object.getElementsByTagName_r(tagName) : document.all.tags(tagName);
};
//定位弹出控件的位置
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};//返回页面日期输入框的具体位置，并且此panel的定位为absolute，所以能够控制控件的位置在输入框的下方
};
//以下两个方法用于确保选中的日期在输入框中正确显示
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+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".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;
};
String.prototype.toDate = function(delimiter, pattern) {
delimiter = delimiter || "-";
pattern = pattern || "ymd";
var a = this.split(delimiter);
var y = parseInt(a[pattern.indexOf("y")], 10);
//remember to change this next century ;)
if(y.toString().length <= 2) y += 2000;
if(isNaN(y)) y = new Date().getFullYear();
var m = parseInt(a[pattern.indexOf("m")], 10) - 1;
var d = parseInt(a[pattern.indexOf("d")], 10);
if(isNaN(d)) d = 1;
return new Date(y, m, d);
};
document.writeln('<div id="__calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">');
document.writeln('<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>');
var __ci = window.frames['__calendarIframe'];
__ci.document.writeln('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">');
__ci.document.writeln('<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
__ci.document.writeln('<head>');
__ci.document.writeln('<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>');
__ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft<\/title>');
__ci.document.writeln('<style type="text\/css">');
__ci.document.writeln('<!--');
__ci.document.writeln('body {font-size:12px;margin:0px;text-align:center;}');
__ci.document.writeln('form {margin:0px;}');
__ci.document.writeln('select {font-size:12px;background-color:#EFEFEF;}');
__ci.document.writeln('table {border:0px solid #CCCCCC;background-color:#FFFFFF}');
__ci.document.writeln('th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}');
__ci.document.writeln('th.theader {font-weight:normal;background-color:#666666;color:#FFFFFF;width:24px;}');
__ci.document.writeln('select.year {width:64px;}');
__ci.document.writeln('select.month {width:60px;}');
__ci.document.writeln('td {font-size:12px;text-align:center;}');
__ci.document.writeln('td.sat {color:#0000FF;background-color:#EFEFEF;}');
__ci.document.writeln('td.sun {color:#FF0000;background-color:#EFEFEF;}');
__ci.document.writeln('td.normal {background-color:#EFEFEF;}');
__ci.document.writeln('input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
__ci.document.writeln('input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
__ci.document.writeln('input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}');
__ci.document.writeln('-->');
__ci.document.writeln('<\/style>');
__ci.document.writeln('<\/head>');
__ci.document.writeln('<body>');
__ci.document.writeln('<\/body>');
__ci.document.writeln('<\/html>');
__ci.document.close();
document.writeln('<\/div>');
var calendar = new Calendar();
其他大牛写得日历控件，看完了自己尝试着按照他们的思路写了一个，基本算是默背下来的吧，虽然不是原创，但从
里面学到的东西以及对js更进一步的了解还是很有好处的。
为了方便对日历控件比较陌生的同学，我把每一步的思路和作用都详细注释一遍吧
思路: 1、声明calendar对象，并初始化一些属性。
2、根据不同的语言定义了几组对应的变量，而且由于这是不变的，比如月份，周几等，作者把他
们声明为了静态变量（也就是对象的属性）（我感觉这是值得我们学习的一种创新）
3、开始画日历表格，以前我一直很诧异这个控件是怎么做到点击下一月上一月时日历表格和表格里的内容动态生成的，
原来是先画出表格，当改变月份时，表格其实没变，只是td里的内容变了。亮点在于把表现和内容分离了就像css和html分开的
原理一样。
4、画完表格后，为表格内的select或td添加内容
5、为表格里的每个元素添加事件，当其中的某个事件触发时，改变全局变量date、year、month的值，让表格内容跟着进行变化
原作者：@author KimSoft (jinqinghua [at] gmail.com)
此控件暂时不支持ie
//算是calendar对象的构造函数吧
function Calendar(beginYear, endYear, language){
this.beginYear = beginYear || 1970 ;//这是js菜鸟值得学习的声明变量的方式，当需要给某变量设置默认值时此方式很nb
this.endYear = endYear || 2020;
this.language = language || 0;
this.dateControl = null; //dateControl是我们绑定的页面text，用于输出我们选择的时间
this.panel = this.getElementById("__calendarPanel");//装日历的容器，便于以后日历弹出时定位日历的位置
this.iframe = window.frames["__calendarIframe"];
this.form = null;
//找出当前日期的年月日并存于变量中，方便以后在点击上月下月时使用这些值，这些是全局变量，当他们的值改变时，这些变量保存这些值的最后状态，以便日期表格里的内容跟着进行改变。
this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.colors = {"bg_cur_day":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"}//鼠标移到某日期时背景色变化
}
//把不变更的变量放到静态变量，以下这些编码我看不懂直接copy过来的，但我们必须明白的是这些都是为了在不同语言环境不产生乱码
Calendar.language = {
"year" : ["\u5e74", "", "", "\u5e74"],
"months" : [
["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"]
],
"weeks" : [["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"],
["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"]
],
"clear" : ["\u6e05\u7a7a", "Clear", "Clear", "\u6e05\u7a7a"],
"today" : ["\u4eca\u5929", "Today", "Today", "\u4eca\u5929"],
"close" : ["\u5173\u95ed", "Close", "Close", "\u95dc\u9589"]
}
//为calendar类添加公共方法draw，此方法是画出存放日期的表格
Calendar.prototype.draw = function(){
calendar = this; // ？改变this的值 一直没明白这句话的用途是什么，可能是为了保证this指代一个calendar对象吧，我把这句话注掉了对控件没影响
求解
//声明一个数组，存放表格的html，感觉作者用cs[cs.length]为数组动态添加元素，这值得我们这些新手学习
var _cs = [];
_cs[_cs.length] = '<form id="__calendarForm" name="__calendarForm" method="post">';
_cs[_cs.length] = '<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">';
_cs[_cs.length] = ' <tr>';
_cs[_cs.length] = ' <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="<" \/><\/th>';
_cs[_cs.length] = ' <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"><\/select><select class="month" name="monthSelect" id="monthSelect"><\/select><\/th>';
_cs[_cs.length] = ' <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value=">" \/><\/th>';
_cs[_cs.length] = ' <\/tr>';
_cs[_cs.length] = ' <tr>';
for(var i = 0; i < 7; i++) {
_cs[_cs.length] = '<th class="theader">';
_cs[_cs.length] = Calendar.language["weeks"][this.language][i];
_cs[_cs.length] = '<\/th>';
}
_cs[_cs.length] = '<\/tr>';
for(var i = 0; i < 6; i++){
_cs[_cs.length] = '<tr align="center">';
for(var j = 0; j < 7; j++) {
switch (j) {
case 0: _cs[_cs.length] = '<td class="sun"> <\/td>'; break;
case 6: _cs[_cs.length] = '<td class="sat"> <\/td>'; break;
default:_cs[_cs.length] = '<td class="normal"> <\/td>'; break;
}
}
_cs[_cs.length] = '<\/tr>';
}
_cs[_cs.length] = ' <tr>';
_cs[_cs.length] = ' <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" \/><\/th>';
_cs[_cs.length] = ' <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" \/><\/th>';
_cs[_cs.length] = ' <th colspan="4"><input type="button" class="b" name="closeButton" id="closeButton" \/><\/th>';
_cs[_cs.length] = ' <\/tr>';
_cs[_cs.length] = '<\/table>';
_cs[_cs.length] = '<\/form>';
this.iframe.document.body.innerHTML = _cs.join("");
this.form = this.iframe.document.forms["__calendarForm"];
this.form.clearButton.value = Calendar.language["clear"][this.language];
this.form.selectTodayButton.value = Calendar.language["today"][this.language];
this.form.closeButton.value = Calendar.language["close"][this.language];
//为日历控件上的按钮或select添加事件
this.form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth(this);}
this.form.goNextMonthButton.onclick = function () {calendar.goNextMonth(this);}
this.form.yearSelect.onchange = function () {calendar.update(this);}
this.form.monthSelect.onchange = function () {calendar.update(this);}
this.form.clearButton.onclick = function () {calendar.dateControl.value = "";calendar.hide();}
this.form.closeButton.onclick = function () {calendar.hide();}
this.form.selectTodayButton.onclick = function () {
var today = new Date();
calendar.date = today;
calendar.year = today.getFullYear();
calendar.month = today.getMonth();
calendar.dateControl.value = today.format('yyyy-MM-dd');
calendar.hide();
}
}
//为calendar类添加公共方法：bindYear()用于为年份select选择框赋值
Calendar.prototype.bindYear = function(){
var ys = this.form.yearSelect;
ys.length = 0;
for (var i = this.beginYear; i <= this.endYear; i++){
ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i);
}
}
//为calendar类添加公共方法：bindMonth()用于为月份select选择框赋值
Calendar.prototype.bindMonth = function() {
var ms = this.form.monthSelect;
ms.length = 0;
for (var i = 0; i < 12; i++){
ms.options[ms.length] = new Option(Calendar.language["months"][this.language][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();
};
//当改变了月份和年份时调用此方法，根据改变后的this.date的值设置选择框的选中项，注意这里并没有改变每个td里的值，此方法
//只负责改变选项框，这就是面向对象的体现：每个方法只负责自己的部分，不越俎代庖，很优雅，一个功能实现需要多喝方法的配合
Calendar.prototype.changeSelect = function() {
var ys = this.form.yearSelect;
var ms = this.form.monthSelect;
for (var i= 0; i < ys.length; i++){
if (ys.options[i].value == this.date.getFullYear()){
ys[i].selected = true;
break;
}
}
for (var i= 0; i < ms.length; i++){
if (ms.options[i].value == this.date.getMonth()){
ms[i].selected = true;
break;
}
}
};
//改变select的value调用的方法，改变了value那么对应的年和月就得跟着改变，要不下面的td不会刷新内容
Calendar.prototype.update = function (e){
this.year = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value;
this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value;
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
};
//重点方法：为没个td设置value
Calendar.prototype.bindData = function () {
var calendar = this;
var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());
var tds = this.getElementsByTagName_r("td", this.getElementById("__calendarTable", this.iframe.document));//找到所有的td
for(var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = calendar.colors["bg_over"];
tds[i].onclick = null;
tds[i].onmouseover = null;
tds[i].onmouseout = null;
tds[i].innerHTML = dateArray[i] || " ";
if (i > dateArray.length - 1) continue;
if (dateArray[i]){
tds[i].onclick = function () {
if (calendar.dateControl){
calendar.dateControl.value = new Date(calendar.date.getFullYear(),
calendar.date.getMonth(),
this.innerHTML).format('yyyy-MM-dd');
}
calendar.hide();
}
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_over"];}
var today = new Date();
if (today.getFullYear() == calendar.date.getFullYear()) {
if (today.getMonth() == calendar.date.getMonth()) {
if (today.getDate() == dateArray[i]) {
tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}
}
}
}
}//end if
}//end for
};
//看似简单的一个方法，却是表格内容能正确变化的保证，以前一直很纳闷究竟怎么能做到闰年2月29天以及怎么确定每天是星期几
//以为用了什么算法，其实就是这么个简单却实用的方法就能搞定。我感觉这个方法是核心
Calendar.prototype.getMonthViewDateArray = function (y, m) {
var dateArray = new Array(42);
var dayOfFirstDate = new Date(y, m, 1).getDay(); //得到某年某月的第一天是星期几
var dateCountOfMonth = new Date(y, m + 1, 0).getDate(); //得到下个月的第0天的号数，用于确定上个月的天数
for (var i = 0; i < dateCountOfMonth; i++) {
dateArray[i + dayOfFirstDate] = i + 1;
}
return dateArray;
};
//此日历控件的入口方法，此方法用于调出控件，并且初始化控件内容和控件的位置dateControl用于表示显示日期的输入框
Calendar.prototype.show = function (dateControl, popuControl) {
if (this.panel.style.visibility == "visible") {
this.panel.style.visibility = "hidden";
}
if (!dateControl){
throw new Error("arguments[0] is necessary!")
}
this.dateControl = dateControl;
popuControl = popuControl || dateControl;
this.draw();
this.bindYear();
this.bindMonth();
if (dateControl.value.length > 0){
this.date = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
this.changeSelect();
this.bindData();
var xy = this.getAbsPoint(popuControl);
this.panel.style.left = xy.x + "px";
this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";
this.panel.style.visibility = "visible";
};
Calendar.prototype.hide = function() {
this.panel.style.visibility = "hidden";
};
//个人感觉，对于遵守dom规则的应用下面两个方法作用不大
Calendar.prototype.getElementById = function(id, object){
object = object || document;
return document.getElementByIdx_x_x_x ? object.getElementById(id) : document.all(id);
};
Calendar.prototype.getElementsByTagName = function(tagName, object){
object = object || document;
return document.getElementsByTagName ? object.getElementsByTagName_r(tagName) : document.all.tags(tagName);
};
//定位弹出控件的位置
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};//返回页面日期输入框的具体位置，并且此panel的定位为absolute，所以能够控制控件的位置在输入框的下方
};
//以下两个方法用于确保选中的日期在输入框中正确显示
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+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".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;
};
String.prototype.toDate = function(delimiter, pattern) {
delimiter = delimiter || "-";
pattern = pattern || "ymd";
var a = this.split(delimiter);
var y = parseInt(a[pattern.indexOf("y")], 10);
//remember to change this next century ;)
if(y.toString().length <= 2) y += 2000;
if(isNaN(y)) y = new Date().getFullYear();
var m = parseInt(a[pattern.indexOf("m")], 10) - 1;
var d = parseInt(a[pattern.indexOf("d")], 10);
if(isNaN(d)) d = 1;
return new Date(y, m, d);
};
document.writeln('<div id="__calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">');
document.writeln('<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>');
var __ci = window.frames['__calendarIframe'];
__ci.document.writeln('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">');
__ci.document.writeln('<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
__ci.document.writeln('<head>');
__ci.document.writeln('<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>');
__ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft<\/title>');
__ci.document.writeln('<style type="text\/css">');
__ci.document.writeln('<!--');
__ci.document.writeln('body {font-size:12px;margin:0px;text-align:center;}');
__ci.document.writeln('form {margin:0px;}');
__ci.document.writeln('select {font-size:12px;background-color:#EFEFEF;}');
__ci.document.writeln('table {border:0px solid #CCCCCC;background-color:#FFFFFF}');
__ci.document.writeln('th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}');
__ci.document.writeln('th.theader {font-weight:normal;background-color:#666666;color:#FFFFFF;width:24px;}');
__ci.document.writeln('select.year {width:64px;}');
__ci.document.writeln('select.month {width:60px;}');
__ci.document.writeln('td {font-size:12px;text-align:center;}');
__ci.document.writeln('td.sat {color:#0000FF;background-color:#EFEFEF;}');
__ci.document.writeln('td.sun {color:#FF0000;background-color:#EFEFEF;}');
__ci.document.writeln('td.normal {background-color:#EFEFEF;}');
__ci.document.writeln('input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
__ci.document.writeln('input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
__ci.document.writeln('input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}');
__ci.document.writeln('-->');
__ci.document.writeln('<\/style>');
__ci.document.writeln('<\/head>');
__ci.document.writeln('<body>');
__ci.document.writeln('<\/body>');
__ci.document.writeln('<\/html>');
__ci.document.close();
document.writeln('<\/div>');
var calendar = new Calendar();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【原创】最详细-vc TabCtrol控件的用法（有注释）
- 六个JS日历控件打包发布(51ascx.com)
- JS日历控件集合----附效果图、源代码【转：http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html】
- 【原创】最详细用VC在工具栏上添加COMBOX控件（有注释）
- js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js
- JS写的Calendar日历控件
- 基于jQuery的日历控件【原创】
- 结合日历控件使用的强制输入时分秒的js
- JS日历控件集合----附效果图、源代码
- JS学习之一个简易的日历控件
- 大量JavaScript日历控件（some free Calendar control by JS）
- js的日历控件 --xhtml zhuan
- js实现日历控件
- 修改js Calendar日历控件 兼容IE9/谷歌/火狐
- js日历控件
- 支持 简体，繁体，英文的js日历控件
- 使用js将long类型转化为"yyyy-MM-dd hh:mm:ss"日期格式&jQuery自带日历控件的汉化教程
- JS 日历控件(蓝色)
- js可以选择时间的日历控件
- JavaScript 几种JS日历控件