【EasyUI】 日期格式化

本文经过了测试,解决getFullyear() is not a function等问题

效果如下:

首先:

Oracle中字段设置为DATE,MySQL中设置为DATETIME,MyBatis中会自动映射为TimeStamp;

其次:

model实体类中字段使用sql.Timestamp,如果设置为DATE类型,那么时分秒会显示为00:00:00这样显然没有什么意义。

 1 function formatterdate(val, row) {
 2     if (val != null) {
 3         var date = new Date(val);
 4         return date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
 5                 + date.getDate();
 6     }
 7 }
 8 /**
 9  * 格式化日期(不含时间)
10  */
11 function formatterdate1(val, row) {
12     if (val != null) {
13         var date = new Date(val);
14         return date.getFullYear()
15                 + "-"// "年"
16                 + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
17                         + (date.getMonth() + 1)) + "-"// "月"
18                 + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
19     }
20 }
21 /**
22  * 格式化日期(含时间"00:00:00")
23  */
24 function formatterdate2(val, row) {
25     if (val != null) {
26         var date = new Date(val);
27         return date.getFullYear()
28                 + "-"// "年"
29                 + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
30                         + (date.getMonth() + 1)) + "-"// "月"
31                 + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
32                 + " " + "00:00:00";
33     }
34 }
35 /**
36  * 格式化去日期(含时间)
37  */
38 function formatterdate3(val, row) {
39     if (val != null) {
40         var date = new Date(val);
41         return date.getFullYear()
42                 + "-"// "年"
43                 + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
44                         + (date.getMonth() + 1))
45                 + "-"// "月"
46                 + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
47                 + " "
48                 + (date.getHours() < 10 ? "0" + date.getHours() : date
49                         .getHours())
50                 + ":"
51                 + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
52                         .getMinutes())
53                 + ":"
54                 + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
55                         .getSeconds());
56     }
57 }
View Code

以上是Common.js,引入到需要使用的jsp文件中。

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 <!DOCTYPE html>
  7 <html>
  8 <head>
  9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 10     <title>File Info</title>
 11     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/default/easyui.css">
 12     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/icon.css">
 13     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/color.css">
 14     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/demo/demo.css">
 15     <link rel="stylesheet" type="text/css" href="../css/info.css">
 16     <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>
 17     <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
 18     <script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
 19     <!-- <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> -->
 20     <script type="text/javascript" src="../js/Common.js"></script>
 21 </head>
 22 <body>
 23     <!-- 显示文件信息的表格 -->
 24     <table id="dg"  class="easyui-datagrid" style="height: 470px;"
 25             url="findAll.do"
 26             toolbar="#toolbar" pagination="true"
 27             rownumbers="true" fitColumns="true" singleSelect="true"
 28             data-options="fit:false,border:false,pageSize:5,pageList:[5,10,15,20]" >
 29         <thead>
 30             <tr>
 31                 <!-- 此处必须和实体类字段一致 -->
 32                 <th field="filename" width="50">文件名</th>
 33                 <th field="filepath" width="50">文件路径</th>
 34                 <th field="updatedate" width="50">上传时间</th>
 35             </tr>
 36         </thead>
 37     </table>
 38     <table id="tdList"></table>
 39     <script type="text/javascript">
 40     var $jq = jQuery.noConflict();
 41     $jq(function () {
 42         $jq("#tdList").datagrid({
 43             url: "findAll.do",               
 44             title: "数据字典列表",
 45             loadMsg: '正在加载信息...',
 46              "100%",               
 47             idField: "Id",               
 48             fitColumns: true,
 49             pagination: true,
 50             pageSize: 10,
 51             pageList: [10, 20, 35, 50],               
 52             singleSelect: true,
 53             rownumbers: true,
 54             columns: [[
 55                     { field: 'filename', title: '文件名',  120 },                
 56                     { field: 'filepath', title: '文件路径',  80 },                   
 57                     {
 58                         field: 'updatedate', title: '上传时间',  80,                           
 59                         formatter : formatterdate3
 60                     }
 61  
 62             ]],
 63             toolbar: [{
 64                 id: 'add',
 65                 text: '添加',
 66                 iconCls: 'icon-add',
 67                 handler: add
 68             }],
 69             onLoadSuccess: function (data) {
 70                 if (!data.rows) {
 71                     var body = $jq(this).data().datagrid.dc.body2;
 72                     body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center;">没有数据</td></tr>');
 73                 }
 74             }
 75         });
 76     });
 77             
 78  
 79     function add(){
 80         $jq("#add").dialog({
 81             title: "添加数据字典类别",
 82             collapsible: true,
 83             minimizable: true,
 84             maximizable: true,
 85             resizable: true,
 86              400,
 87             height: 260,
 88             buttons: [{
 89                 text: "保存",
 90                 iconCls: "icon-add",
 91                 handler: function () {
 92                     $jq("#add form").submit();
 93                 }
 94             }, {
 95                 text: "取消",
 96                 iconCls: "icon-cancel",
 97                 handler: function () {
 98                     $jq("#add").dialog("close");
 99                 }
100             }]
101         });
102     };
103     
104 </script>
105 </body>
106 </html>
View Code

以上是JSP代码。

感谢其他博主提供的宝贵算法和建议。

原文地址:https://www.cnblogs.com/flydkPocketMagic/p/5998532.html