How to use the current date renderer?

Glyndwr

I am currently updating my CDNs to the latest version for DataTables:

<script src="https://cdn.datatables.net/2.1.7/js/dataTables.min.js"></script>

While doing so I found this tip "NOTE - As of DataTables 1.12, DataTables has a built in date / time renderer which should be used in place of this renderer. See the manual for details.". My understanding is that "//cdn.datatables.net/plug-ins/2.1.7/dataRender/datetime.js" is now redundant. I read the manual and am not sure how to implement this.

I have replaced:

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

with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.4/js/dataTables.dateTime.min.js"></script>

And changed my js from:

columnDefs: [
    targets: [14], render: $.fn.dataTable.render.moment( 'DD/MM/YYYY' )},
],

to:

columnDefs: [
    {targets: [14], render: DataTable.render.datetime('DD/MM/YYYY')},
],

This results in the following error"

jquery.min.js:2 Uncaught TypeError: $.fn.dataTable.render.moment is not a function
    at showDataTable (accountAdmin.js:196:53)
    at HTMLDocument.<anonymous> (accountAdmin.js:17:2)
    at e (jquery.min.js:2:27028)
    at t (jquery.min.js:2:27330)

What have I done wrong please?

Kind regards,

Glyn

allan

Hi Glyn,

You don't need https://cdn.datatables.net/datetime/1.5.4/js/dataTables.dateTime.min.js any more. Instead, use the built in DataTable.render.datetime() renderer.

Example available here.

Allan

Glyndwr

Hi Allan,

Thank you. I have commented out the js and css for "dataTables.dateTime.min.js". However, I am still getting this error. I have included the Moment.js cdn" as per the instructions:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>

And changed the columnDefs to:

columnDefs: [
    {targets: [14], render: DataTable.render.datetime('DD/MM/YYYY')},
],

Is the 'columnDefs' structured correctly or is there another issue please?

Kind regards,

Glyn

allan

Hi Glyn,

Are you still getting the same $.fn.dataTable.render.moment is not a function error? If so, then you must have a call to that function around somewhere.

Your columnDefs looks correct.

If you can link to the page showing the issue, I'd be happy to take a look and debug it.

Allan

Glyndwr

Hi Allan,

I have this at the start:

moment.updateLocale(moment.locale(), { invalidDate: "" }

Kind regards,
Glyn

Glyndwr

Hi Allan,

I think there must be an issue with my Eclipse IDE. I just tried the page again and it is now working. After each change I do a Ctrl Shift Delete and clear the cache and I also do a rebuild. However, now and again, this happens that code suddenly starts working or not working.

Kind regards,

Glyn

allan

Interesting. If you deploy it for production use, does it work reliably?

Allan

Glyndwr

Hi Allan,

I have had another few examples of this since I posted. This is not in production and I do not currently have a hosting service. I am working on it because Malaysia Scouts have expressed an interest. I do not make any money on this as I donate the code to them if they decide to use the application.

I also have a friend who is interested in using it as a real life scenario for training he does in Thailand. He does not make much, if any, money from that.

Kind regards,
Glyn

allan

Interesting. I'm afraid I can't help with the Eclipse aspect, but if you run into the problem with a built and deployed site, let me know and I can take a look.

Allan