作者:Holygrace 日期:2007-12-07
HG.Calendar:一个基于jquery的日历控件,大小只有3k,不过功能齐全,切换日期方便,速度快,兼容ie6,ie7,firefox,上手简单。(jquery官方有个日历选择控件,我就不想说了,又难看,速度又慢!)
大家先看看Demo吧 http://www.holygrace.cn/project/calendar.htm
使用方法: $(selector).calendar(options);
$(selector)是容纳日历的容器,比如事先定义好的div,这是个jquery对象
options 是以参数对象包含默认为
initDate:控件初始化是的默认选择日期
monthText:月份的显示文本,如果你喜欢英文就调这里
weekText:表头的周显示文本;
range:日期的可选范围是一个长度为2的数组,[minDate,maxDate];
clickEvent: function,但点击一个有效日期时出发的事件,默认向事件传递一个选择的日期对象。
就这么多了,如果你想用着方便,options可以不调整,直接下面代码
更详细的大家可以右键查看我demo的源码,包括样式表都有详细的注释!不明白的可以留言问我!
下载
源码(6.1k): http://www.holygrace.cn/project/js/Hg.Calendar.js
压缩版(3k): http://www.holygrace.cn/project/packer/Hg.Calendar.js
黑色皮肤的样式表: http://www.holygrace.cn/project/image/calendar/blue/calendar.css
大家先看看Demo吧 http://www.holygrace.cn/project/calendar.htm
使用方法: $(selector).calendar(options);
$(selector)是容纳日历的容器,比如事先定义好的div,这是个jquery对象
options 是以参数对象包含默认为
程序代码
{
initDate:new Date(),
monthText:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月", "12月"],
weekText:["日","一","二","三","四","五","六"],
range:[new Date(1949,0,1),new Date(2015,0,1)],
clickEvent:null
}
initDate:new Date(),
monthText:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月", "12月"],
weekText:["日","一","二","三","四","五","六"],
range:[new Date(1949,0,1),new Date(2015,0,1)],
clickEvent:null
}
initDate:控件初始化是的默认选择日期
monthText:月份的显示文本,如果你喜欢英文就调这里
weekText:表头的周显示文本;
range:日期的可选范围是一个长度为2的数组,[minDate,maxDate];
clickEvent: function,但点击一个有效日期时出发的事件,默认向事件传递一个选择的日期对象。
就这么多了,如果你想用着方便,options可以不调整,直接下面代码
程序代码
$("#demo1").calendar()
更详细的大家可以右键查看我demo的源码,包括样式表都有详细的注释!不明白的可以留言问我!
下载
源码(6.1k): http://www.holygrace.cn/project/js/Hg.Calendar.js
压缩版(3k): http://www.holygrace.cn/project/packer/Hg.Calendar.js
黑色皮肤的样式表: http://www.holygrace.cn/project/image/calendar/blue/calendar.css