http://www.cnblogs.com/lhgstudio/archive/2009/02/13/1390381.html
没法上传附件,请到以上地址下载
下载地址:http://files.cnblogs.com/lhgstudio/lhgcalendar.rar
一、组件简介
lhgcalendar 是一款小巧、高效、美观的弹出日历组件。它的功能虽然不多,但使用非常简单。它是一个非常小巧的组件,代码只有一个文件,大小6K,因此使得它在功能小也 就简单了一些(但个人认为只要在满足使用的情况下,使用更简洁的组件不仅减少了文件的大小,还可提高网页加载的速度,提高组件的运行效率。当然如果你想使 用功能强大的日历组件,网上有很多这样的组件您尽可以去使用。但我认为功能多的组件肯定就有你用不到的功能,这样肯定就浪费了一些宝贵的有限的资源。所以 本组件适用于那些功能要求不多,但要求小巧,高效率的组件的人,个人认为效率还是第一位的)。
它的主要特点有:
- 小巧:整个组件代码只有一个文件lhgcalendar.js,大小为5.4K。
- 调用简单:你只需要在相应位置添加一个事件来调用主函数即可(参考下面有示列)。
- 效率高:你试下就知道了:-)。
- 外观还看得过去:呵呵,这个算不上特点,本人界面设计能力差,不过提供的这2种样式还算过得去。
- 支持的浏览器:IE6+,Firefox2.0+,Chrome(谷歌浏览器),Opera9.5+,Safari3.0+等。
如果使用上有任何问题可与我共同探讨。我的QQ:463214570 ,blog:http://www.cnblogs.com/lhgstudio
二、组件结构
- lhgcalendar.js:组件核心文件,其实也就这一个文件:-)。
- skin:包含组件图片文件和样式表文件的文件夹。
- skin/default.css:组件默认式表文件。
- skin/gray.css:灰以样式的样式表文件。
三、调用方法及参数说明
- 在需要调用的页面引入lhgcalendar.js,例如:<script type="text/javascript" src="lhgcalenar.js"></script>
- 然后在要调用的位置上引发的事件中加入调用代码,例如:<input type="text" onclick="lhgcalendar();"/>
- 参数说明:只有一个参数,就是接收日期的控件的ID,用法见下面的示例
还 有就是在lhgcalendar.js里有个组件的配置对象:var config = { dir : '', skin : 'default' } 中的dir指的是日历显示在控件的下面还右面, 默认是下面,写成'right'就是在右面;skin指的就是皮肤名称。
- 注:日期的格式为 M-Y-D
四、功能及示例
1. 常规调用
调用代码:<input id="date1" type="text" onclick="lhgcalendar();"/>
2. 图标触发
调用代码:<input type="text" id="date2" /> <img align="absmiddle" src="date.gif" onclick="lhgcalendar('date2');" />;
注:date2为输入框的id
【转自:http://yiilin2008.blog.163.com/blog/static/8866204200951753234526/】