【EasyUI】 日期格式化

时间:2023-03-08 21:31:35

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

效果如下:

【EasyUI】 日期格式化

首先:

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

其次:

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

 function formatterdate(val, row) {
if (val != null) {
var date = new Date(val);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
+ date.getDate();
}
}
/**
* 格式化日期(不含时间)
*/
function formatterdate1(val, row) {
if (val != null) {
var date = new Date(val);
return date.getFullYear()
+ "-"// "年"
+ ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
+ (date.getMonth() + 1)) + "-"// "月"
+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
}
}
/**
* 格式化日期(含时间"00:00:00")
*/
function formatterdate2(val, row) {
if (val != null) {
var date = new Date(val);
return date.getFullYear()
+ "-"// "年"
+ ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
+ (date.getMonth() + 1)) + "-"// "月"
+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
+ " " + "00:00:00";
}
}
/**
* 格式化去日期(含时间)
*/
function formatterdate3(val, row) {
if (val != null) {
var date = new Date(val);
return date.getFullYear()
+ "-"// "年"
+ ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
+ (date.getMonth() + 1))
+ "-"// "月"
+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
+ " "
+ (date.getHours() < 10 ? "0" + date.getHours() : date
.getHours())
+ ":"
+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
.getMinutes())
+ ":"
+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
.getSeconds());
}
}

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

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>File Info</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/color.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/demo/demo.css">
<link rel="stylesheet" type="text/css" href="../css/info.css">
<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> -->
<script type="text/javascript" src="../js/Common.js"></script>
</head>
<body>
<!-- 显示文件信息的表格 -->
<table id="dg" class="easyui-datagrid" style="height: 470px;"
url="findAll.do"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true"
data-options="fit:false,border:false,pageSize:5,pageList:[5,10,15,20]" >
<thead>
<tr>
<!-- 此处必须和实体类字段一致 -->
<th field="filename" width="50">文件名</th>
<th field="filepath" width="50">文件路径</th>
<th field="updatedate" width="50">上传时间</th>
</tr>
</thead>
</table>
<table id="tdList"></table>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(function () {
$jq("#tdList").datagrid({
url: "findAll.do",
title: "数据字典列表",
loadMsg: '正在加载信息...',
width: "100%",
idField: "Id",
fitColumns: true,
pagination: true,
pageSize: 10,
pageList: [10, 20, 35, 50],
singleSelect: true,
rownumbers: true,
columns: [[
{ field: 'filename', title: '文件名', width: 120 },
{ field: 'filepath', title: '文件路径', width: 80 },
{
field: 'updatedate', title: '上传时间', width: 80,
formatter : formatterdate3
} ]],
toolbar: [{
id: 'add',
text: '添加',
iconCls: 'icon-add',
handler: add
}],
onLoadSuccess: function (data) {
if (!data.rows) {
var body = $jq(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center;">没有数据</td></tr>');
}
}
});
}); function add(){
$jq("#add").dialog({
title: "添加数据字典类别",
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
width: 400,
height: 260,
buttons: [{
text: "保存",
iconCls: "icon-add",
handler: function () {
$jq("#add form").submit();
}
}, {
text: "取消",
iconCls: "icon-cancel",
handler: function () {
$jq("#add").dialog("close");
}
}]
});
}; </script>
</body>
</html>

以上是JSP代码。

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