推荐兼容 IE、 FireFox 的 javascript 日历控件

一、简介与声明

此日历控件是 CSDN 网友 KimSoft 的作品：http://blog.csdn.net/kimsoft/archive/2006/05/24/753225.aspx。界面清爽，纯脚本运行，实现了日期的回显功能，最重要的是兼容 FireFox 。
为了适应更多需求，我针对该控件作了以下修改：
1、返回日期的输出格式，我改成了由用户以参数形式指定 Style
2、关于 IE 中 <select> 下拉框的处理，不调用隐藏，而是用<iframe>直接覆盖
3、不使用 //this.panel.style.visibility = "hidden"; 因为它在 FireFox 中会掩盖之前出现过地方下面的链接文字，而是改用 this.panel.style.display = "none";
4、新增失去焦点后，整个 WebCalendar 即隐藏

此控件版权归属于 KimSoft ，大家在使用过程中请勿删除文中的版权声明，谢谢！再次感谢 KimSoft的开源。

二、修改后的代码

以下是 WebCalendar.js 修改后的源码

<!--
var cal;
var isFocus = false ; // 是否为焦点
// 以上为寒羽枫2006-06-25添加的变量

// 选择日期→由寒羽枫2006-06-25添加
function SelectDate(obj,strFormat)
... {
vardate=newDate();
varby=date.getFullYear()-50;//最小值→50年前
varey=date.getFullYear()+50;//最大值→50年后
cal=newCalendar(by,ey,1,strFormat);//初始化英文版
cal.show(obj);
}
/**/ /**
*返回日期
*@paramdthedelimiter
*@parampthepatternofyourdate
2006-06-25由寒羽枫修改为根据用户指定的style来确定；
*/
// String.prototype.toDate=function(x,p){
String.prototype.toDate = function (style) ... {
/**//*
if(x==null)x="-";
if(p==null)p="ymd";
vara=this.split(x);
vary=parseInt(a[p.indexOf("y")]);
//remembertochangethisnextcentury;)
if(y.toString().length<=2)y+=2000;
if(isNaN(y))y=newDate().getFullYear();
varm=parseInt(a[p.indexOf("m")])-1;
vard=parseInt(a[p.indexOf("d")]);
if(isNaN(d))d=1;
returnnewDate(y,m,d);
*/
vary=this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年
varm=this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月
vard=this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日
if(isNaN(y))y=newDate().getFullYear();
if(isNaN(m))m=newDate().getMonth();
if(isNaN(d))d=newDate().getDate();
vardt;
eval("dt=newDate('"+y+"','"+(m-1)+"','"+d+"')");
returndt;
}

/**/ /**
*格式化日期
*@paramdthedelimiter
*@parampthepatternofyourdate
*@authormeizz
*/
Date.prototype.format = function (style) ... {
varo=...{
"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(varkino)...{
if(newRegExp("("+k+")").test(style))...{
style=style.replace(RegExp.$1,
RegExp.$1.length==1?o[k]:
("00"+o[k]).substr((""+o[k]).length));
}
}
returnstyle;
} ;

/**/ /**
*日历类
*@parambeginYear1990
*@paramendYear2010
*@paramlang0(中文)|1(英语)可自由扩充
*@paramdateFormatStyle"yyyy-MM-dd";
*@version2006-04-01
*@authorKimSoft(jinqinghua[at]gmail.com)
*@update
*/
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=newDate();
this.year=this.date.getFullYear();
this.month=this.date.getMonth();


this.colors=...{
"cur_word":"#FFFFFF",//当日日期文字颜色
"cur_bg":"#00FF00",//当日日期单元格背影色
"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;

varmvAry=[];
mvAry[mvAry.length]='<formname="calendarForm"style="margin:0px;">';
mvAry[mvAry.length]='<tablewidth="100%"border="0"cellpadding="0"cellspacing="1">';
mvAry[mvAry.length]=

分享到：

程序员与艺术 | Firefox 的 JavaScript 问题两则

• 2007-03-23 16:40
• 浏览 261
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论