接口说明

一、JCalendar构造函数

参数:
1、三个表示年月日的整数,比如:new JCalendar(2007-5-18)
2、一个表示年月日的字串,年月日之间以“-”隔开,比如new JCalendar("2007-5-18")
3、空。参数为空,日历初始化为当前日期。

二、实例方法

1、toString()
得到解释后的日历的HTML代码
参数:无
返回:解释后的日历的HTML代码

2、setYears(first,last)
设置日历年份下拉菜单的年份范围
参数:
1、first 第一个年份界限
2、last 第二个年份界限
两个参数顺序可以颠倒

2、bind(obj_id,direction)
将日历邦定到某个文框,当点击该文本框的时候弹出日历。
日历的当前日期为文本框里的日期,如果文本框里有日期的话。否则就是当前日期
参数:
1、obj_id:文本框的id
direction:控制日历显示的方向,[right|bottom]。可以为空,默认为right。
right-日历显示在文本框的右边,bottom日历显示在文本框下面。

3、setKeyDate(Date_Array)
特别显示关键天,典型例子:博客、网络日志之类的日历
实现原理,为每个关键天的表格单元添加一个class,名字为keydate,CSS样式需要自己写,比如加个背景之类的
参数:
Date_Array:日期的数组,比如:[1,4,6,9]

三、静态方法

多数静态方法是控件内部调用的,用户不应该调用。
但是有两个方法用户可以覆盖,也是日历为用户提供的两个事件:
1、JCalendar.onupdate:在日历日期更新时触发,用户需要自己写函数覆盖默认函数 2、JCalendar.onclick:在日历日期被点击时触发,用户需要自己写函数覆盖默认函数。
[注意]用作文本框输入控件时,不要覆盖。

当然,用户可以自己定义自己的日历样式,下面是样式的说明,同时也给出了本人的写的样式:
#calendar_container {/ *日历容器,是一个绝对定位的DIV,在日历作为输入控件时才有用。作为文本框输入控件时必须定义这个样式,而且一定要定义宽度 */
width:160px;
border:1px solid #06C;
}
#calendar {/*日历表格样式,对应的是一个<table>标签*/
border-collapse:collapse;
background-color:#FFF;
width:160px;
height:120px;
margin:0px auto;
cursor:default;
}
#calendar td {/*很明显,这是一个表格单元*/
text-align:center;
vertical-align:middle;
font-family:"宋体";
}
#calendar thead {/*表格头,也就是显示日一二三四五六那行*/
background-color:#999;
color:#FFF;
}
#calendar caption {/*表格标题,也就是日历的第一行,显示年月的地方*/
background-color:#06C;
}
#calendar a{/*超链接样式*/
color:#F90;
margin:0 5px;
text-decoration:none;
}
#calendar #prev_month,#calendar #next_month {/*点击到上一个月,下一个月的两个箭头*/
font-size:18px;
margin:0;
}
#calendar #c_today {/*表格单元格当前天的样式*/
background-color:#036;
color:#FFF;
}
#calendar .over {/*鼠标经过单元格时,显示样式*/
background-color:#CCC;
}
#calendar .keydate {/*关键天显示样式*/
color:#06F;
}

使用说明

例子一:文本框输入控件

1、实例化JCalendar
2、调用JCalendar的实例方法bind邦定文本框,其中可以多次调用bind方法进行邦定多个文本框。
3、调用例子:
window.onload = function(){
var j = new JCalendar();
j.setYears(1990,2020);//设置年份下拉菜单范围为1990年到2020年
j.bind('a',"bottom");
j.bind('b');
}

例子二:网站页面普通的日历

1、实例化JCalendar
2、根据需要调用实例方法setKeyDate来设置关键天的显示,前提是定义好CSS样式,别忘了,样式是一个类,类名叫keydate
3、调用例子:
window.onload = function(){
var j = new JCalendar();
j.setYears(1990,2020);//设置年份下拉菜单范围为1990年到2020年
j.setKeyDate([1,4,7,14,23,28]);//设置关键天
document.body.innerHTML = j.toString();
}
[注意]同一个页面,不能也不会出现两个以上实例(因为程序限制了^_^),即不能同时作为普通日历和输入控件用。
主要原因是用到了很多静态方法。

一个作为输入控件的例子