【EasyUI篇】Calendar日曆元件
阿新 • • 發佈：2019-02-15
微信公眾號：
關注可瞭解更多的教程。問題或建議，請公眾號留言;
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)); }); });
效果圖
