【EasyUI篇】Calendar日历组件-CFANZ编程社区

查看--> 全套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

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

22.Calendar日历组件

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