推荐兼容 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 的开源。

[原作者 kimsoft 于2006-11-28 22:00:00 发表：此代码可以任意修改、欢迎传播]

2006 - 12- 03 ，我针对目前出现的 BUG 做了以下修正：

1、把原控件中的 <form> 变成 <div>，解决不能在页面的 form 标签中引用该脚本的 BUG

2、新增突出已选择的日期的背景色

3、不需要每次使用都初始化实例，整张页面共用一个实例，加快显示速度

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

<!--

var cal;

var isFocus=false; //是否为焦点

//以上为 寒羽枫 2006-06-25 添加的变量

//选择日期 → 由 寒羽枫 2006-06-25 添加

function SelectDate(obj,strFormat)

//String.prototype.toDate = function(x, p) {

//年份下拉框绑定数据

//月份下拉框绑定数据

//向前一月

//向后一月

//改变SELECT选中状态

//更新年、月

//绑定数据到月视图

//根据年、月得到月视图数据(数组形式)

//扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source

//扩展 object.getElementsByTagName(tagName)

//取得HTML控件绝对位置

//显示日历

//隐藏日历

//焦点转移时隐藏日历 → 由寒羽枫 2006-06-25 添加

//以下由寒羽枫 2006-06-25 修改 → 用<iframe> 遮住 IE 的下拉框

//document.write('<div id="ContainerPanel" style="visibility:hidden"><div id="calendarPanel" style="position: absolute;visibility: hidden;z-index: 9999;');

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;"></div>');

if(document.all)

document.write('</div>');

//var calendar = new Calendar(); //此句被 寒羽枫注释，否则 IE 将报错

//调用calendar.show(dateControl, popControl);

//-->

1、引用 WebCalendar.js

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

2、编写触发的脚本事件

this.Txt_Date.Attributes["onclick"] = "SelectDate(this,'yyyy-MM-dd')";

<input name="Txt_Date" type="text" maxlength="10" id="Txt_Date" onclick="SelectDate(this,'yyyy/MM/dd')" />