DataTables Plugin: How to format a date column in DataTable plugin?

Question

I am new in the DataTable Plugin for jquery.

I would like to convert a column date to dd/mm/yyyy but it is returning me in the table this format: Wed Jan 09 2013 00:00:00 GMT+0100 (Hora estándar romance).

$('#tblProceso').dataTable({
    "data": dataSet.dataList,
    "columns": [
                { "title": "my date", "data": "mydate" }
    ]
});

Class I am using for it is

Public class DateClass {
  Public Property mydate As DateTime
}

this process is called in ajax function and in the response I assign the list of DateClass.

How can I format the column? What do I need to add?

Solution 1

On method would be like this,

When you create date list at server side, store date in required format (dd/mm/yy). So when you make Ajax call and get list of date, it will came from server by default format you want.

*sorry for my bad English.

Solution 2

If you are returning a nullable date time the render function needs to work a little different:

        $('#tblProceso').DataTable({
        columns: [

            {"title": "my date",
             "data": "mydate",
             "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();}
            }
        ]};

Solution 3

my approach using Moment.js based at David Sopkpo answer:

        $('#tblProceso').DataTable({
        columns: [

            {"title": "my date",
             "data": "mydate",
             "type": "date ",
             "render":function (value) {
                  if (value === null) return "";
                  return moment(value).format('DD/MM/YYYY');
                 }
            }
        ]};

Solution 4

if you want to format it with javascript, you need to override of the fnRender function of the column definition. Something like this:

$("#tblProceso").dataTable({
  "data": dataSet.dataList,
  "aoColumnDefs": [
    { 
        "aTargets": [0], //column index counting from the left
        "sType": 'date',
        "fnRender": function ( dateObj ) {
            var oDate = new Date(dateObj.aData[0]);
            result = oDate.getDate()+"/"+(oDate.getMonth()+1)+"/"+oDate.getFullYear();
            return "<span>"+result+"</span>";
        }
    }
  ],
  "columns": [
            { "title": "my date", "data": "mydate" }
  ]
});

with datatables if you have a column with dates, you will have issues when sorting, so, use this plugin

View more solutions

Comments

[David Sopko]

That code using moment is so much cleaner. Thanks for the introduction to that code library.