一、简介与声明

            此日历控件是 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 修改后的源码 

推荐兼容 IE、 FireFox 的 javascript 日历控件<!--
推荐兼容 IE、 FireFox 的 javascript 日历控件
var cal;
推荐兼容 IE、 FireFox 的 javascript 日历控件
var isFocus=false//是否为焦点
推荐兼容 IE、 FireFox 的 javascript 日历控件//
以上为  寒羽枫 2006-06-25 添加的变量
推荐兼容 IE、 FireFox 的 javascript 日历控件

推荐兼容 IE、 FireFox 的 javascript 日历控件
//选择日期 → 由 寒羽枫 2006-06-25 添加
推荐兼容 IE、 FireFox 的 javascript 日历控件
function SelectDate(obj,strFormat)
-->


三、调用方法

1、引用 WebCalendar.js

推荐兼容 IE、 FireFox 的 javascript 日历控件<script src="js/WebCalendar.js" type="text/javascript"></script>

2、编写触发的脚本事件

推荐兼容 IE、 FireFox 的 javascript 日历控件this.Txt_Date.Attributes["onclick"= "SelectDate(this,'yyyy-MM-dd')";

推荐兼容 IE、 FireFox 的 javascript 日历控件<input name="Txt_Date" type="text" maxlength="10" id="Txt_Date" onclick="SelectDate(this,'yyyy/MM/dd')" />

相关文章: