Calendar（日历）

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

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

 

使用案例

使用标签创建日历。

  1. <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>  
使用Javascript创建日历。
  1. <div id="cc" style="width:180px;height:180px;"></div>  
 
  1. $('#cc').calendar({   
  2.     current:new Date()   
  3. });  

属性

属性名 属性值类型 描述 默认值
width number 日历控件宽度。 180
height number 日历控件高度。 180
fit boolean 当设置为true的，将设置日历控件大小自适应父容器。 false
border boolean 定义是否显示边框。 true
showWeek boolean 当设置为true时，将显示周数。（该属性自1.5版开始可用） false
weekNumberHeader string 周数的标签显示在头部。（该属性自1.5版开始可用）
getWeekNumber function(date) 该函数用于返回周数值。（该属性自1.5版开始可用）
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 年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。
<div class="easyui-calendar" data-options="year:2012,month:6" />
当前年份（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));
相关文章
jquery easyui实现可编辑表格jquery easyui ribbon ribbon界面 jquery easyui textbox 文本框 jquery easyui datetimespinner 日期时间微调框 jquery easyui filebox 文件框 jquery easyui datalist 数据列表 jquery easyui resizable 调整大小 jquery easyui pagination 分页 jquery easyui searchbox 搜索框 jquery easyui progressbar 进度条 jquery easyui combotree 树形下拉框 jquery easyui combogrid 数据表格下拉框 jquery easyui numberbox 数值输入框 jquery easyui datebox 日期输入框 jquery easyui calendar 日历 jquery easyui portal 门户 jquery easyui datagrid view 数据表格展示 jquery easyui editable datagrid 可编辑表格 jquery easyui editable tree 可编辑树 php calendar 日历 函数
关注编程学问公众号