首页 | API文档 | 基础示例 | 更新记录
 

应用到你的项目

如果您使用独立版本的lhgCalendar日历组件,您只需在页面head中引入lhgcore.lhgcalendar.min.js文件,3.0.0版本做了修改可以和jQuerya库同时引用,而且3.0.0版本的独立组件的lhgcore库做了极大的修改,专门为组件定制,压缩后才6K与组件合在一起总大小才不到15K,效率上得到很大提高,比引用jQuery快很多,但这里要注意如果你同时引用了jQuery库的话必须把$换成J,如果没引用jQuery库则可直接使用$。

<script type="text/javascript" src="lhgcore.lhgcalendar.min.js"></script>

如果您的页面中引入了jQuery库文件,您只需在页面head中再引入lhglhgcalendar.min.js文件即可,此时lhgCalendar组件将作为jQuery的一个插件使用,注意lhgcalendar.min.js要写到jQuery库文件的下面哟。

<script type="text/javascript" src="jQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="lhgcalendar.min.js"></script>

组件提供全局默认配置参数读/写接口,如果您想修改组件的全局默认配置,按照以下方法设置即可(可选):

(function(config){
    config['extendDrag'] = true; // 注意,此配置参数只能在这里使用全局配置,在调用窗口的传参数使用无效
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})($.calendar.setting);

初始化参数列表

  1. id:文本输入框的id

    类型:String
    默认:null
    说明:使用其他的元素如:<img><div>等来调用弹出日期框时一定要指定输入日期的文本框的id,注意id前一定要加#号,如:#cal
  2. format:自定义日期格式

    类型:String
    默认:'yyyy-MM-dd'
    说明:yMdHms分别代表年月日时分秒,你可以任意组合这些元素来自定义你个性化的日期格式。请见下表:

    日期格式表

    格式 说明
    yy 将年份表示为二位数字。
    yyyy 将年份表示为四位数字。如果少于四位数,前面补零。
    M 将月份表示为从 1 至 12 的数字
    MM 同上,如果小于两位数,前面补零。
    d 将月中日期表示为从 1 至 31 的数字。
    dd 同上,如果小于两位数,前面补零。
    H 将小时表示为从 0 至 23 的数字。
    HH 同上,如果小于两位数,前面补零。
    m 将分钟表示为从 0 至 59 的数字。
    mm 同上,如果小于两位数,前面补零。
    s 将秒表示为从 0 至 59 的数字。
    ss 同上,如果小于两位数,前面补零。

    示例(只列出了常用的几种格式,如需要其它格式请自行设置)

    格式字符串
    yyyy-MM-dd HH:mm:ss 2008-03-12 19:20:00
    yy年M月 08年3月
    yyyyMMdd 20080312
    MM/dd/yyyy 03/12/2008

    动态变量表

    格式 说明
    %y 当前年
    %M 当前月
    %d 当前日
    %H 当前时
    %m 当前分
    %s 当前秒

  3. noToday:是否包含今天

    类型:Boolean
    默认:false
  4. btnBar:是否显示下面的按钮栏

    类型:Boolean
    默认:true
  5. minDate:最小日期

    类型:String
    默认:null
    说明:注意格式要为 yyyy-MM-dd
  6. maxDate:最大日期

    类型:String
    默认:null
    说明:注意格式要为 yyyy-MM-dd
  7. targetFormat:目标文本框的日期格式

    类型:String
    默认:null
    说明:当有2个文本框之间进行日期范围限制时指来指定对应的文本框的日期格式
  8. disWeek:无效周

    类型:String
    默认:null
    说明:可以使用此功能禁用周日至周六所对应的日期,多个周用,分开,如:'2,4'
  9. disDate:无效日期

    类型:String
    默认:null
    说明:可以使用此功能禁用所指定的一个或多个日期
  10. enDate:有效日期

    类型:Boolean
    默认:false
    说明:为true时,无效日期变成有效日期,一般和disDate配合使用
  11. real:存储真实日期值的控件的ID

    类型:String
    默认:null
    说明:指定一个控件的ID,必须具有value属性(如input),用于存储真实值
  12. onSetDate:点击某一日期时执行的回调函数

    类型:Function
    默认:null
    说明:当选择一个日期时点击这个日期时就会触发这个函数
  13. zIndex:日历组件的z-index值

    类型:Number
    默认:1978

API函数接口列表

API接口列表:

  1. show():显示日历

    参数:无
    说明:显示日历组件
  2. hide():隐藏日历

    参数:无
  3. getDate(type) :获取指定格式的日期

    参数1:指定的日期格式 (y:返回年,M:返回月,d:返回日,H:返回小时,m:返回分钟,s:返回秒,date:返回年月日,格式yyyy-MM-dd,dateTime:返回年月日时分秒,格式yyyy-MM-dd HH:mm:ss)
  4. $.calendar.formatDate(data,format) :格式化日期

    参数1:date -- 要格式化的日期
    参数2:format -- 指定的格式

API属性接口列表:

  1. inpE :插入日期的文本框对象

    显示日期的文本框
  2. DOM:日历的DOM对象

    通过此对象可以对日历DOM对象进行操作