LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JCalendar日历控件

admin
2010年10月24日 19:1 本文热度 2700
[code] 无忧WEB技术网-JCalendar 日历控件 v1.0 beta
接口说明

一、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();
}
[注意]同一个页面,不能也不会出现两个以上实例(因为程序限制了^_^),即不能同时作为普通日历和输入控件用。
主要原因是用到了很多静态方法。

一个作为输入控件的例子

 

 

 

 

[/code]

该文章在 2010/10/24 19:01:46 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved