How to format date in table cell

Carneno

Hello,

Thank you for the DataTables plugin. It is an an incredible product and you have provided an extensive set of documentation for it.

I'm having a problem when trying to display a date in a table cell. It displays "Invalid date" in the cell.

When I look at the date in the debugger, it shows as "{5/22/2017 6:09:07 AM -04:00}".

I am using this code to display the date:

               var detailsTableOpt = {
                    'serverSide': true,
                    'processing': true,
                    'ajax': {
                         'url': '/Mailbox/GetEmailsData',
                         'data': function (d) {
                              d.MailboxID = selected;
                         }
                    },
                    'destroy': true,
                    'columns': [
                         { 'data': 'From' },
                         { 'data': 'To' },
                         { 'data': 'Subject' },
                         { 'data': 'EmailDate' },
                         { 'data': 'Size' }
                    ],

                    columnDefs: [
                         { targets: [0, 1], "width": "20%", render: $.fn.dataTable.render.ellipsis(20, false, true) },
                         { targets: 2, "width": "33%", render: $.fn.dataTable.render.ellipsis(40, false, true) },
                         { targets: 3, "width": "16%", render: $.fn.dataTable.render.moment( 'Do MMM YYYYY' ) },
                         { targets: 4, "width": "11%", render: $.fn.dataTable.render.number(',', '.', 0) }
                    ]
               };

If I remove the render from that line like this: " { targets: 3, "width": "16%" },", it displays in the table like this: "2017-05-22T06:09:07-04:00".

Any help that anyone can provide would be gratefully appreciated.

Thanks,
Tony

bindrid

did you include the plugin for that call?
//cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js

Carneno

bindrid,

Thanks for your help.

Can you tell me where I would put that cdn in my MVC 5/EF 6/.NET 4.5 project?

I tried putting this in my BundleConfig.cs file:

   bundles.UseCdn = true;   //enable CDN support
   var dtDateCdnPath = "http://cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js";
   bundles.Add(new ScriptBundle("~/bundles/dtDate",
                           dtDateCdnPath));

I got that information from here: https://stackoverflow.com/questions/23831176/asp-net-mvc-bundle-only-application-relative-urls-url-are-allowed, but I'm still getting the same error.

Thanks,
Tony

bindrid

First see if that is your problem in the first place.
Create a <script> tag in he html portion of your code and see if that fixes the problem. If it does, then worry about getting the bundle right.

(unfortunately, my MVC class got cancelled so I can help much with that aspect yet)

Carneno

bindrid,

I put this at the beginning of my cshtml file:

<script src="http://cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js"></script>

.
When executing it gives a 'jQuery' is undefined error on line 91 0f the datetime.js file.

If I remove the script, the program runs without error.

Thanks for your help.
Tony

bindrid

Ok, I got this figured out. I was getting the same error that you were so I was about to tell you to use the http://momentjs.com/ when I read that you actually need both the plugin code plus the moments js library .

its cdn is https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js

Having said that, I was still having issues so the code below uses the moments.js library directly. In my enterprise solution, I actually do use the moments library.

this code takes in the provided date and formats it to the format you wants. Go to their website to find the exact format you want.

$(document).ready( function () {
  var table = $('#example').DataTable({
    
    columnDefs:[{targets:4, render:function(data){
      return moment(data).format('MMMM Do YYYY'); 
    }}]
  });
} );

you can see it run at http://live.datatables.net/ciwumehe/1/edit

Carneno

Yes, that worked bindrid.

Thanks for all of your help.

Tony