JSCal2使用指南2

原文地址：JSCal2: JavaScript日历控件(二)

Calendar.setup(args)等价于new Calendar(args)，用于创建一个Calendar。args是JavaScript键值对，包括以下属性：

共用的属性

animation：是否有动画效果。默认值为true（对于IE6，默认值为false）。

bottomBar：是否显示Bottom Bar（用于显示今天按钮和时分）。默认值是true。

selection：指定日历选中的初始日期。默认值是empty。

date：日历默认显示的日期（如：20091001）。它也确定了日历显示的年月。

fdow：指定星期的第一天（first day of week）。默认值在语言JS文件（如：cn.js）中定义，0代表星期日，1代表星期一，依次类推。

min：日历控件允许选择的最小日期（如：20010801）。

max：日历控件允许选择的最大日期（如：20121229）。

reverseWheel：默认值为false。如果你想使日历翻页的方向与鼠标滚动的方向相反，设置该属性为true。

selectionType：默认值为Calendar.SEL_SINGLE（只能选择单个日期）。如果你想选择多个日期，设置该属性为Calendar.MULTIPLE。

checkRange：是否检查日期的范围。默认值为false，当你允许选择范围日期，但要求不能选择失效日期时，应该设置该属性为true。

weekNumbers：是否显示周数列。默认值为false。

opacity：指定动画效果的透明度。IE浏览器的默认值为1，其他浏览器为3。

titleFormat：指定Title Bar的格式，默认值是"%b %Y"，显示月的简称和年的全称。

showTime：是否显示时间。默认值为false，不显示时间选择器。值为true时，显示24小时制的时间；值为12时，显示12小时制的时间。

timePos：指定时间选择器在Bottom Bar上的位置。默认值为"right"，如果你想让时间选择器显示在"Today"按钮的左侧，设置此属性为left。

time：指定时间选择器初始显示的时间，默认显示当前时间，格式为"HHMM"（如果你想显示9:45PM，指定属性为2145）。

minuteStep：指定分钟增加或减少的幅度，默认值为5。

内联式（Inline）日历控件相关的属性

cont：容器元素（适用于inline式，不适用于popup式）。包含日历控件的元素（如：div）的id。

弹出式（Popup）日历控件相关的属性

align：默认对齐方式，只适用于popup日历控件。

inputField：只适用于popup日历控件，值为<input>元素的id。

trigger：触发popup日历控件的元素的id。

dateFormat：显示的日期格式。可参考Calendar.printDate。

回调方法

onSelect：当改变日期时执行的回调方法。

onChange：当日历改变位置（年或月改变）时执行的回调方法。

onTimeChange：当时间选择器的时间改变时执行的回调方法。

disabled：确定失效日期时执行的回调方法。

dateInfo：获取日期信息时执行的回调方法

onFocus：当日历获取焦点时执行的回调方法。

onBlur：当日历失去焦点时执行的回调方法。

示例 - 内联式日历

效果

 

示例 - 弹出式日历

JSCal2默认显示的是世界标准时间，中国处于GMT+08:00时区，所以需要通过onChange回调方法进行设置。

效果

 

示例 - 设置失效日期

方式一：使用min和max属性设置日历控件可以选择的日期范围；

效果

方式二：通过disabled属性指定回调方法，该方法接收JS日期对象作为参数，如果是失效日期返回值为true；

效果

 

示例 - 日期高亮显示、选中日期显示提示信息

       日历控件可以高亮显示指定的日期，也可以给日期增加提示功能。这些功能是通过dateInfo属性指定的回调方法来实现的，该回调方法接收JS日期对象作为参数，如果日期不需要特殊处理返回null，如果日期需要进行特殊处理返回一组JavaScript键值对，包含以下两个属性：

klass：CSS class名称

tooltip：显示的提示信息

效果