easyui控件实例之Calendar日历
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
源码如下：
1.
<!DOCTYPE html> 2.
<html> 3.
<head> 4.
<meta charset="UTF-8"> 5.
<title>Basic Calendar - jQuery EasyUI Demo</title> 6.
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.
<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.
<link rel="stylesheet" type="text/css" href="../demo.css"> 9.
<script type="text/javascript" src="../../jquery.min.js"></script> 10.
<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.
</head> 12.
<body> 13.
<h2>Basic Calendar</h2> 14.
<p>Click to select date.</p> 15.
<div style="margin:20px 0"></div> 16.
<div class="easyui-calendar" style="width:250px;height:250px;"></div> 17.
18.
</body> 19.</html>
源码如下：
1.
<!DOCTYPE html> 2.
<html> 3.
<head> 4.
<meta charset="UTF-8"> 5.
<title>First Day of Week - jQuery EasyUI Demo</title> 6.
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.
<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.
<link rel="stylesheet" type="text/css" href="../demo.css"> 9.
<script type="text/javascript" src="../../jquery.min.js"></script> 10.
<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.
</head> 12.
<body> 13.
<h2>First Day of Week</h2> 14.
<p>Choose the first day of the week.</p> 15.
16.
<div style="margin:20px 0"> 17.
<select onchange="$('#cc').calendar({firstDay:this.value})"> 18.
<option value="0">Sunday</option> 19.
<option value="1">Monday</option> 20.<option value="2">Tuesday</option>
Calendar 日历控件
基本基本实现实现
自定自定义义星期几作星期几作为为日历排列的第一天 设置星期几作为日历显示中的第一天.
Sunday
21.
<option value="3">Wednesday</option> 22.
<option value="4">Thursday</option> 23.
<option value="5">Friday</option> 24.
<option value="6">Saturday</option> 25.
</select> 26.
</div> 27.
28.
<div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div> 29.
</body> 30.</html>
源码如下：
1.
<!DOCTYPE html> 2.
<html> 3.
<head> 4.
<meta charset="UTF-8"> 5.
<title>Custom Calendar - jQuery EasyUI Demo</title> 6.
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.
<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.
<link rel="stylesheet" type="text/css" href="../demo.css"> 9.
<script type="text/javascript" src="../../jquery.min.js"></script> 10.
<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.
</head> 12.
<body> 13.
<h2>Custom Calendar</h2> 14.
<p>This example shows how to custom the calendar date by using 'formatter' function.</p> 15.
<div style="margin:20px 0"></div> 16.
17.
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> 18.
19.
<script> 20.
var d1 = Math.floor((Math.random()*30)+1); 21.
var d2 = Math.floor((Math.random()*30)+1); 22.
function formatDay(date){ 23.
var m = date.getMonth()+1; 24.
var d = date.getDate(); 25.
var opts = $(this).calendar('options'); 26.
if (opts.month == m && d == d1){ 27.
return '<div class="icon-ok md">' + d + '</div>'; 28.
} else if (opts.month == m && d == d2){ 29.
return '<div class="icon-search md">' + d + '</div>'; 30.
} 31.
return d; 32.
} 33.
</script> 34.
<style scoped="scoped"> 35.
.md { 36.
height: 16px; 37.
line-height: 16px; 38.
background-position: 2px center; 39.
text-align: right; 40.
font-weight: bold; 41.
padding: 0 2px; 42.
color: red; 43.
} 44.
</style> 45.
</body> 46.</html>
自定自定义义日历控件
用'formatter'来自定义日历的显示.可以设计出自己喜欢的日历控件哦 禁用禁用选选中指定日期
只允许用户选择指定的日期，这里演示只允许用户选择星期一.
源码如下：
1.<!DOCTYPE html>
2.<html>
3.<head>
4. <meta charset="UTF-8">
5. <title>Disable Calendar Date - jQuery EasyUI Demo</title>
6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
8. <link rel="stylesheet" type="text/css" href="../demo.css">
9. <script type="text/javascript" src="../../jquery.min.js"></script>
10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
11.</head>
12.<body>
13. <h2>Disable Calendar Date</h2>
14. <p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>
15. <div style="margin:20px 0"></div>
16.
17. <div class="easyui-calendar" style="width:250px;height:250px;" data-options="
18. validator: function(date){
19. if (date.getDay() == 1){
20. return true;
21. } else {
22. return false;
23. }
24. }
25. "></div>
26.
27.</body>
28.</html>
今年第几周
显示选中日期是今年的第几周.
源码如下：
1.<!DOCTYPE html>
2.<html>
3.<head>
4. <meta charset="UTF-8">
5. <title>Week Number on Calendar - jQuery EasyUI Demo</title>
6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
8. <link rel="stylesheet" type="text/css" href="../demo.css">
9. <script type="text/javascript" src="../../jquery.min.js"></script>
10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
11.</head>
12.<body>
13. <h2>Week Number on Calendar</h2>
14. <p>This example shows how to display the week number on calendar.</p>
15. <div style="margin:20px 0"></div>
16. <div class="easyui-calendar" showWeek="true" weekNumberHeader="Wk" style="width:250px;height:250px;"></div>
17.
18.</body>
19.</html>
流体布局。