format json date to mm/dd/yy format before displaying in a jquery datatable

Question

I am trying to display some data in a datatable and the table script I am using is

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

the data that is received by the table is json and would be something like

[
 {  
      "userId":179,
      "applicationId":"pgm-apn",
      "username":"collaborator.user3",
      "password":"password1",
      "email":"[email protected]",
      "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":"[email protected]",
      "firstName":"sherlock ",
      "lastName":"homes",
      "enabled":true,
      "userCreated":"gtuser",
      "userModified":"gtuser",
      "createdTime":1422010854246,
      "updatedTime":1422010854246
   }

I want to display the dates as proper datetime.Currently it is getting displayed as teh same sting in the json data.Is there any way to convert that in the datatable

Nisfan · Accepted Answer · 2019-08-17 17:07:59Z

53

You can use "render" property to format your column display http://datatables.net/reference/option/columns.render#function.

For example:

{
    "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();
    }
}

edited Aug 17, 2019 at 17:07

Nisfan

7466 silver badges10 bronze badges

answered Feb 26, 2015 at 3:32

nhkhanh

1,56913 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geo Thomas Over a year ago

This works ...thanks ....is there a way I can get the date in the following format '02/12/2015 18:26 23'.....with the exact time

nhkhanh Over a year ago

Check out date.getHours(), date.getMinutes(), date.getSeconds().

Ajay Jangra Over a year ago

if month .length > 1 then also add "0" in my code for eg - if month is 10 or 11 or 12 then it show 010 or 011 or 012

David Sopko · Accepted Answer · 2016-07-14 21:44:34Z

23

For a nullable date time, DateTime?, you will want to use a different rendering function:

        $('#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();}
            }
        ]};

edited Jul 14, 2016 at 21:44

answered Jul 14, 2016 at 17:45

David Sopko

5,7332 gold badges40 silver badges43 bronze badges

Comments

TechnoCrat · Accepted Answer · 2015-02-26 05:17:17Z

i have created demo using moment js and use of render function to convert json data into required format.

jsfiddle demo

also find code below:

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();
        }
    }]
});

IamP · Accepted Answer · 2018-02-13 05:10:13Z

3

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

answered Feb 13, 2018 at 5:10

IamP

1269 bronze badges

Comments

Mahfuzur Rahman · Accepted Answer · 2018-01-11 23:16:24Z

2

For dot.net and javascript, you can just use like @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
            },

answered Jan 11, 2018 at 23:16

Mahfuzur Rahman

14111 bronze badges

Comments

Anon · Accepted Answer · 2018-06-12 06:35:33Z

2

For showing the time along with the date add the code below:

"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;
                        }

edited Jun 12, 2018 at 6:35

Anon

7,6512 gold badges45 silver badges63 bronze badges

answered Jun 12, 2018 at 4:30

Suraj Gulhane

412 bronze badges

Comments

jinxed_coder · Accepted Answer · 2015-02-26 03:01:28Z

1

I always use moment.js(http://momentjs.com/) when dealing with dates in js.

The date values returned are in unix timestamp so you need to convert them.

Here's a sample fiddle: http://jsfiddle.net/fws8u54g/

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

answered Feb 26, 2015 at 3:01

jinxed_coder

398 bronze badges

Comments

Kris Bunda · Accepted Answer · 2021-03-05 18:59:44Z

1

@Suraj Gulhane --your answer is the only one I could get to work for ASP.NET Core Server-Side jQuery DataTables DateTime formatting.

I customized it a little (essentially removing the time, putting year first) but here's what that looks like in case it helps anyone else:

{
  "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
}

answered Mar 5, 2021 at 18:59

Kris Bunda

2323 silver badges10 bronze badges

Collectives™ on Stack Overflow

format json date to mm/dd/yy format before displaying in a jquery datatable

8 Answers 8

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related