第二十四章：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視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載