微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
22.Calendar日历组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>NumberBox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Calendar.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--class加载方式--%>
<%--<div class="easyui-calendar" style="width: 200px; height: 200px;">
</div>--%>
<div style="width: 200px; height: 200px;">
<div id="box" >
</div>
</div>
<br><br><br><br>
<button id="btn">点击</button>
</body>
</html>
JS文件
$(function () {
$('#box').calendar({
// width:200,
// height:200,
// fit:true,
// border:true,
//设置第一列显示星期几，0为星期日
// firstDay:1,
//星期的标志
// weeks:['S','M','T','W','T','F','S'],
//月份的标志
// months:['Jan',
// 'Feb', 'Mar', 'Apr', 'May',
// 'Jun', 'Jul', 'Aug',
// 'Sep', 'Oct', 'Nov', 'Dec'],
// year:1996,
// month:3,
current:new Date(2018,02,24),//选中但不会跳转
formatter:function (date) {
// 格式化数据
// return '#'+date.getDate();
return date.getDate();
},
styler:function (date) {
// if(date.getDate() == 1){
// return "background-color:blue";
// }
},
validator:function (date) {
//设置如果是星期一则可选
// if(date.getDay() == 1){
// return true;
// }else{
// return false;
// }
return true;
},
onSelect : function (date) {
// console.log(date);
},
onChange : function (newDate,oldDate) {
// alert(newDate+"|"+oldDate);
}
});
$("#btn").click(function () {
//将日历移动至指定时间
$('#box').calendar('moveTo',new Date(1996,02,24));
});
});
效果图
