EasyUI-Calendar（日历）

2015-07-20 19:24:38 暂无评论阳光倾城网络前端 1,092

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

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

使用案例

使用标签创建日历。

id=“cc” class=“easyui-calendar” style=“width:180px;height:180px;”

使用javascript创建日历。

id=“cc” style=“width:180px;height:180px;”

$(‘#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));