EasyUI 日期格式化
Posted 丶会飞的羊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 }
以上是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 width: "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: \'文件名\', width: 120 }, 56 { field: \'filepath\', title: \'文件路径\', width: 80 }, 57 { 58 field: \'updatedate\', title: \'上传时间\', width: 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 width: 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>
以上是JSP代码。
感谢其他博主提供的宝贵算法和建议。
以上是关于EasyUI 日期格式化的主要内容，如果未能解决你的问题，请参考以下文章