在 jquery 数据表中显示之前将 json 日期格式化为 mm/dd/yy 格式

Posted

技术标签:

【中文标题】在 jquery 数据表中显示之前将 json 日期格式化为 mm/dd/yy 格式【英文标题】:format json date to mm/dd/yy format before displaying in a jquery datatable 【发布时间】:2015-04-28 07:23:54 【问题描述】:

我正在尝试在 datatable 中显示一些数据,而我使用的表格脚本是

$('#userData').dataTable(
     
        "ajax": 
                "url": "my-url",
                "dataSrc":  "",
                ,
                
        "columns":[
        "data": "userId",
        "data": "applicationId",
        "data": "username",
        "data": "firstName",
        "data": "userCreated",
        "data": "createdTime",
        "data": "updatedTime"
        ],
        
     );

表格接收到的数据是 json,类似于

[
   
      "userId":179,
      "applicationId":"pgm-apn",
      "username":"collaborator.user3",
      "password":"password1",
      "email":"user@xample.com",
      "firstName":"Anthony",
      "lastName":"Gonsalves",
      "enabled":true,
      "userCreated":"gtuser",
      "userModified":"gtuser",
      "createdTime":1422454697373,
      "updatedTime":1422454697373
   ,
     
      "userId":173,
      "applicationId":"pgm-apn",
      "username":"consumer.user",
      "password":"password1",
      "email":"test@egc.com",
      "firstName":"sherlock ",
      "lastName":"homes",
      "enabled":true,
      "userCreated":"gtuser",
      "userModified":"gtuser",
      "createdTime":1422010854246,
      "updatedTime":1422010854246
   

我想将日期显示为正确的日期时间。目前它在 json 数据中显示为相同的字符串。有没有办法在数据表中转换它

【问题讨论】:

【参考方案1】:

您可以使用“render”属性来格式化您的列显示http://datatables.net/reference/option/columns.render#function。

例如:


    "data": "createdTime",
    "render": function (data) 
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
    

【讨论】:

这行得通......谢谢......有没有办法我可以得到以下格式的日期'02/12/2015 18:26 23'......时间 查看 date.getHours()、date.getMinutes()、date.getSeconds()。 if month .length > 1 然后在我的代码中添加“0”,例如 - 如果月份是 10 或 11 或 12,则显示 010 或 011 或 012【参考方案2】:

对于可以为空的日期时间 DateTime?,您将需要使用不同的渲染函数:

        $('#userData').DataTable(
        columns: [
             "data": "userId",
            "data": "userCreated",
             "type": "date ",
             "render":function (value) 
                 if (value === null) return "";

                  var pattern = /Date\(([^)]+)\)/;
                  var results = pattern.exec(value);
                  var dt = new Date(parseFloat(results[1]));

                  return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
            
        ];

【讨论】:

【参考方案3】:

我已经使用moment js 创建了演示,并使用渲染函数将 json 数据转换为所需的格式。

jsfiddle demo

还可以在下面找到代码:

testdata = [
    "id": "58",
        "country_code": "UK",
        "title": "Legal Director",
        "pubdate": "1422454697373",
        "url": "http://..."
, 
    "id": "59",
        "country_code": "UK",
        "title": "Solutions Architect,",
        "pubdate": "1422454697373",
        "url": "http://..."
];

$('#test').dataTable(
    "aaData": testdata,
        "aoColumns": [
        "mDataProp": "id"
    , 
        "mDataProp": "country_code"
    , 
        "mDataProp": "title"
    , 
        "mDataProp": "pubdate"
    , 
        "mDataProp": "url"
    ],
        "columnDefs": [
        "targets": 3,
            "data": "pubdate",
            "render": function (data, type, full, meta) 
                console.log('hi...');
            console.log(data);
                console.log(type);
                console.log(full);
                console.log(meta);
            return moment.utc(data, "x").toISOString();
        
    ]
);

【讨论】:

【参考方案4】:

对于 dot.net 和 javascript,您可以像 @David Sopko 一样使用

 
                "data": "Date", "type": "date ",
                "render": function (value) 
                    if (value === null) return "";
                    var pattern = /Date\(([^)]+)\)/;//date format from server side
                    var results = pattern.exec(value);
                    var dt = new Date(parseFloat(results[1]));

                    return dt.getDate() + "." + (dt.getMonth() + 1) + "." + dt.getFullYear();
                , "autoWidth": true
            ,

【讨论】:

【参考方案5】:

要显示时间和日期,请添加以下代码:

"data": 'Date' , 
                        "render": function (data) 
                            var date = new Date(data);
                            var month = date.getMonth() + 1;
                            return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear() + "&nbsp;&nbsp;" +(date.getHours() < 10 ? ("0"+date.getHours()) : date.getHours())+ ":"+(date.getMinutes() < 10 ? ("0"+date.getMinutes()) : date.getMinutes()) ; 
                            //return date;
                        

【讨论】:

【参考方案6】:

在 js 中处理日期时,我总是使用 moment.js(http://momentjs.com/)。

返回的日期值采用 unix 时间戳,因此您需要对其进行转换。

这是一个小提琴示例:http://jsfiddle.net/fws8u54g/

var created = 1422010854246;
moment.utc(created, "x").toISOString();

【讨论】:

【参考方案7】:


  "render": function (data) 
              var d = new Date(data);
              return d.toLocaleString();

【讨论】:

【参考方案8】:

@Suraj Gulhane——你的答案是我唯一可以为 ASP.NET Core 服务器端 jQuery DataTables DateTime 格式工作的答案。

我对其进行了一些定制(基本上去掉了时间,将年份放在首位),但如果它对其他人有所帮助,则如下所示:


  "data": "dateOfBirth", "name": "Date Of Birth", "type": "date",
  "render": function (data) 
    var date = new Date(data);
    var month = date.getMonth() + 1;
    var day = date.getDate();
    return date.getFullYear() + "/" 
       + (month.length > 1 ? month : "0" + month) + "/" 
       + ("0" + day).slice(-2);
       //return date format like 2000/01/01;
    , "autoWidth": true

【讨论】:

以上是关于在 jquery 数据表中显示之前将 json 日期格式化为 mm/dd/yy 格式的主要内容,如果未能解决你的问题,请参考以下文章

将 JSON 文件中的项目数据动态加载到 React

使用 jquery 将 json 数组对象显示为 html

使用jQuery $ .ajax方法显示包含MySQL表数据的JSON [关闭]

如何将动态json加载到jquery数据表

在 jquery 数据表中显示嵌套的 JSON 数据

JQuery 自动完成:在一个字段中显示同一个 JSON 对象的多个属性