小巧、高效、美观的弹出日历组件 ——lhgcalendar

http://www.cnblogs.com/lhgstudio/archive/2009/02/13/1390381.html

没法上传附件，请到以上地址下载

下载地址：https://files.cnblogs.com/lhgstudio/lhgcalendar.rar

 

一、组件简介

lhgcalendar 是一款小巧、高效、美观的弹出日历组件。它的功能虽然不多，但使用非常简单。它是一个非常小巧的组件，代码只有一个文件，大小6K，因此使得它在功能小也 就简单了一些（但个人认为只要在满足使用的情况下，使用更简洁的组件不仅减少了文件的大小，还可提高网页加载的速度，提高组件的运行效率。当然如果你想使 用功能强大的日历组件，网上有很多这样的组件您尽可以去使用。但我认为功能多的组件肯定就有你用不到的功能，这样肯定就浪费了一些宝贵的有限的资源。所以 本组件适用于那些功能要求不多，但要求小巧，高效率的组件的人，个人认为效率还是第一位的）。

它的主要特点有：

1. 小巧：整个组件代码只有一个文件lhgcalendar.js，大小为5.4K。
2. 调用简单：你只需要在相应位置添加一个事件来调用主函数即可（参考下面有示列）。
3. 效率高：你试下就知道了:-)。
4. 外观还看得过去：呵呵，这个算不上特点，本人界面设计能力差，不过提供的这2种样式还算过得去。
5. 支持的浏览器：IE6+，Firefox2.0+，Chrome(谷歌浏览器)，Opera9.5+，Safari3.0+等。

如果使用上有任何问题可与我共同探讨。我的QQ：463214570 ，blog：http://www.cnblogs.com/lhgstudio

二、组件结构

1. lhgcalendar.js：组件核心文件，其实也就这一个文件:-)。
2. skin：包含组件图片文件和样式表文件的文件夹。
3. skin/default.css：组件默认式表文件。
4. skin/gray.css：灰以样式的样式表文件。

三、调用方法及参数说明

1. 在需要调用的页面引入lhgcalendar.js，例如：<script type="text/javascript" src="lhgcalenar.js"></script>
2. 然后在要调用的位置上引发的事件中加入调用代码，例如：<input type="text" onclick="lhgcalendar();"/>
3. 参数说明：只有一个参数，就是接收日期的控件的ID，用法见下面的示例

   还 有就是在lhgcalendar.js里有个组件的配置对象：var config = { dir : '', skin : 'default' } 中的dir指的是日历显示在控件的下面还右面， 默认是下面，写成'right'就是在右面；skin指的就是皮肤名称。

4. 注：日期的格式为 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/】