Displaying the just date not time part in jquery dataTable but sorting on both date and timepart?

Question

i am sending the date as string from server as explained below which has both date and time part like 2010-12-07 17:35:04.127. what i want is just display the date not the time part in data table column i.e 2010-12-07. But also i want the sorting happens on complete date including the time part. So customer created at 2010-12-07 18:35:04.12 should be displayed above 2010-12-07 17:35:04.12 in dataTable column. here is my specific date column code snippet in datatable

  "aoColumns": [ { "mDataProp": "customerCreated","bSearchable": false,
                           "fnRender": function ( o, val  ) 
                               {
                               var javascriptDate = new Date(o.aData["customerCreated"]);
                               javascriptDate = javascriptDate.getFullYear()+"/"+javascriptDate.getMonth()+"/"+javascriptDate.getDate();
                               return "<div class= date>"+javascriptDate+"<div>";
                               }

                       } ]

Issues i am facing are:-

1)On IE and Mozilla date is displayed as NaN/NaN/NaN. Not getting why?

2)On Chrome date is displayed but month is displayed decremented by 1.Why javascriptDate.getMonth() return month decremented by 1?

3)i am not sure sorting will work if take above route where i am displaying just date part but want sorting to happen on complete date including date part?

FYI i am using the bserverSide as false .Basically i am getting the data from server in one go and do the sorting on client side?

score 1 · Accepted Answer · edited May 23 '17 at 11:55

JS months start with 0 and the date needs / instead of -

Related to Problem with date formats in JavaScript with different browsers

Try this DEMO

function getFormattedDate(dString) {
  var d = new Date(dString.split(".")[0].replace(/-/g,"/")); // assuming 2010-12-07 17:35:04.127
  var mm = d.getMonth()+1;
  var dd = d.getDate();
  if (mm<10)mm="0"+mm;
  if (dd<10)dd="0"+dd;
  return d.getFullYear()+"/"+mm+"/"+dd;
}

"aoColumns": [ { "mDataProp": "customerCreated","bSearchable": false,
  "fnRender": function ( o, val  ) {
    return "<div class= date>"+getFormattedDate(o.aData["customerCreated"])+"<div>";
  }
} ]

If you need the time too it would be

function getFormattedDate(dString) {
  var d = new Date(dString.split(".")[0].replace(/-/g,"/")); // assuming 2010-12-07 17:35:04.127
  var mm = d.getMonth()+1;
  var dd = d.getDate();
  if (mm<10)mm="0"+mm;
  if (dd<10)dd="0"+dd;
  var hh = d.getHours();
  var min = d.getMinutes();
  if (hh<10) hh="0"+hh;
  if (min<10) min="0"+min;
  return d.getFullYear()+"/"+mm+"/"+dd+" "+hh+":"+min;
}

Thanks mplungjan. Regarding date display it works great. But sorting does not happen correctly. I mean customer created at 2010-12-07 17:35:04.12 displayed in datatable above of customer created afterwards i.e at 2010-12-07 18:20:02.16. i mean sorting does not work for the customer created on same date.Looks like it is happening becoz we removed the timepart from date. Is there a solution where i can just display the date excluding time part but sorting happens based on date and time? — emilly, Dec 09 '12 at 14:16

Displaying the just date not time part in jquery dataTable but sorting on both date and timepart?

1 Answers1