zoukankan      html  css  js  c++  java
  • 【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代码。

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

  • 相关阅读:
    iframe高度自适应方法
    mysql left join对于索引不生效的问题
    禁止百度转码和百度快照缓存的META声明
    使用graphviz绘制流程图
    安装php扩展sphinx-1.2.0.tgz和libsphinxclient0.9.9
    5种主要的编程风格和它们使用的抽象
    Nodejs调用Aras Innovator服务,处理AML并返回AML
    使用Rancher管理Docker
    docker容器间通信
    使用Portainer管理Docker
  • 原文地址:https://www.cnblogs.com/flydkPocketMagic/p/5998532.html
Copyright © 2011-2022 走看看