使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

Calendar

Document
Native
Basic
First Day of Week
Custom Calendar
Disable Calendar Date
Week Number on Calendar
Fluid Calendar
Plus
Extend

Calendar Document

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

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

用法:

使用标签创建日历。

				
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>  
				
			

使用Javascript创建日历。

				
<div id="cc" style="width:180px;height:180px;"></div>  
<script type="text/javascript">
$('#cc').calendar({    
    current:new Date()    
});  
</script>
				
			

属性:

属性名 属性值类型 描述 默认值
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版开始可用)

代码示例:
				
<script type="text/javascript">
$('#cc').calendar({
  formatter: function(date){
    return date.getDate();
  }
}) 
</script>
				
			
styler function(date) 日历天的样式函数,返回行内样式或CSS样式表的Class名称。(该属性自1.3.6版开始可用)

代码示例:
				
<script type="text/javascript">
$('#cc').calendar({
  styler: function(date){
    if (date.getDay() == 1){
      return 'background-color:#ccc';
      // 函数可以返回预定义的css class和预定义的行内样式
      // return {class:'r1', style:{'color:#fff'}}; 
    } else {
      return '';
    }
  }
})
</script>
				
			
validator function(date) 验证器函数用于确定是否可以选择日历上的某一天,返回false将阻止选择当前天。
(该属性自1.3.6版开始可用)

代码示例:
				
<script type="text/javascript">
$('#cc').calendar({
  validator: function(date){
    if (date.getDay() == 1) {
      return true;
    } else {
      return false;
    }
  }
})
</script>
				
			

事件:

事件名 参数 描述
onSelect date 在用户选择一天的时候触发。

代码示例:
				
<script type="text/javascript">
$('#cc').calendar({
  validator: function(date){
    if (date.getDay() == 1) {
      return true;
    } else {
      return false;
    }
  }
})
</script>
				
			
onChange new Date, oldDate 在用户更改日期的时候触发。(该事件自1.3.6版开始可用)

方法:

方法名 方法属性 描述
options none 返回参数对象。
resize none 调整日历大小。
moveTo date 移动日历到指定日期。

代码示例:
				
<script type="text/javascript">
$('#cc').calendar({
  onSelect: function(date){
    alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
  }
});
</script>