第二十四章：Calendar（日历）组件
学习要点：
- 加载方式
- 属性列表
- 方法列表
- 方法列表
一、加载方式：
1.class 加载方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box" class="easyui-calendar" style="width:200px;height:200px;">
</div>
</body>
</html>
2.JS调用加载：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box" style="width:200px;height:200px;">
</div>
</body>
</html>
$(function(){
$.('#box').calendar({
});
});
二、属性列表：
| Calendar属性 | ||
|---|---|---|
| 属性名 | 值 | 说明 |
| width | number | 日历控件宽度。默认值180。 |
| height | number | 日历控件高度。默认值180。 |
| fit | boolean | 当设置为true的时候，将设置日历控件大小自适应父容器。默认值true。 |
| border | boolean | 定义是否显示边框。默认值true。 |
| firstDay | number | 定义一周的第一天是星期几。0=星期日、1=星期一等。 |
| weeks | array | 显示的周列表内容。默认值：['S','M','T','W','F','S'] |
| months | array | 显示的月列表内容。默认值：['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] |
| year | number | 年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。 |
| month | number | 月日历 |
| current | date | 当前日期 |
| formatter | date | 格式化日期 |
| styler | date | 设置指定日期的样式 |
| validator | date | 设置指定日期是否能够选择 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
</body>
</html>
$(function(){
$.('#box').calendar({
//width:200px,
//height:200px,
//fit:true,
//border:false,
//firstDay:1,
//weeks:['S','M','T','W','F','S'],
//months:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
//year:2015,
//month:5,
//current:new Date(2015,6,1),
//formatter:function(date){
//return '#' + date.getDate();
//}
/*
styler:function(date){
if(date.getDate == 1){
return 'background-color:#ccc';
}
if(date.getDay == 1){
return 'background-color:#ccc';
}
},
*/
validator:function(date){
if(date.getDay == 1){
return true;
}else{
return false;
}
}
});
});
三、事件列表：
| Calendar事件 | ||
|---|---|---|
| 事件名 | 事件属性 | 说明 |
| onSelect | date | 在用户选择一天的时候触发。 |
| onChange | newDate,oldDate | 在用户改变选择的时候触发。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
</body>
</html>
$(function(){
$.('#box').calendar({
//width:200px,
//height:200px,
onSelect:function(date){
alert(date);
}
/*
onChange:function(newDate,oldDate){
alert(newDate +'|'+ oldDate);
}
*/
});
});
四、方法列表：
| Calendar方法 | ||
|---|---|---|
| 方法名 | 传参 | 说明 |
| options | none | 返回参数对象 |
| resize | none | 调整日历大小 |
| moveTo | date | 移动日历到指定日期 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
</body>
</html>
$(function(){
console.log($.('#box').calendar('options'));
$.('#box').calendar('resize');
$.('#box').calendar('moveTo',new Date(2015,1,1));
});
PS：我们可以使用$.fn.calendar.defaults 重置默认值对象。
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102972142
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载