0
点赞
收藏
分享

微信扫一扫

【EasyUI篇】Calendar日历组件


​​查看--> 全套EasyUI示例目录​​

22.Calendar日历组件

【EasyUI篇】Calendar日历组件_css

【EasyUI篇】Calendar日历组件_css_02

 

【EasyUI篇】Calendar日历组件_html_03

 

 

 

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));
});

});

效果图

【EasyUI篇】Calendar日历组件_javascript_04

举报

相关推荐

0 条评论