html日历菜鸟,Calendar（日历）

Calendar(日历)

使用$.fn.calendar.defaults重写默认值对象。

日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置。

示例

使用标签创建日历。

使用Javascript创建日历。

$('#cc').calendar({

current:new Date()

});

属性

属性名

属性值类型

描述

默认值

width

number

日历控件宽度。

180

height

number

日历控件高度。

180

fit

boolean

当设置为true的时候，将设置日历控件大小自适应父容器。

false

border

boolean

定义是否显示边框。

true

firstDay

number

定义一周的第一天是星期几。0=星期日、1=星期一 等。

0

weeks

array

显示的周列表内容。

['S','M','T','W','T','F','S']

months

array

显示的月列表内容。

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',

'Sep', 'Oct', 'Nov', 'Dec']

year

number

年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。

当前年份(4位数)

month

number

月日历。

当前月份(从1开始)

current

Date

当前日期。

当前日期

formatter

function(date)

日期格式化函数，返回日期值。(该属性自1.3.6版开始可用)

代码示例：

$('#cc').calendar({

formatter: function(date){

return date.getDate();

}

})

styler

function(date)

日历天的样式函数，返回行内样式或CSS样式表的Class名称。(该属性自1.3.6版开始可用)

代码示例：

$('#cc').calendar({

styler: function(date){

if (date.getDay() == 1){

return 'background-color:#ccc';

// 函数可以返回预定义的css class和预定义的行内样式

// return {class:'r1', style:{'color:#fff'}};

} else {

return '';

}

}

})

validator

function(date)

验证器函数用于确定是否可以选择日历上的某一天，返回false将阻止选择当前天。(该属性自1.3.6版开始可用)

代码示例：

$('#cc').calendar({

validator: function(date){

if (date.getDay() == 1) {

return true;

} else {

return false;

}

}

})

事件

事件名

事件参数

描述

onSelect

date

在用户选择一天的时候触发。

代码示例：

$('#cc').calendar({

onSelect: function(date){

alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());

}

});

onChange

new Date, oldDate

在用户更改日期的时候触发。(该事件自1.3.6版开始可用)

方法

方法名称

方法参数

描述

options

none

返回参数对象。

resize

none

调整日历大小。

moveTo

date

移动日历到指定日期。

代码示例：

$('#cc').calendar('moveTo', new Date(2012, 6, 1));