Date formatting query

[Deleted User]

Hi There,

I'm trying to format the date in columns 5 and 6 (if it starts at 0) otherwise 6 and 7

$(document).ready(function() {
$('#example').DataTable( {
    "paging": true,
    "deferRender": true,
    "ajax":{
        "url":"https://services7.arcgis.com/ewmPU1HI7BJPXAG4/arcgis/rest/services/NOPIMS_Wells_Feature_Service/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson",
        "dataSrc": "features"
    },
      "columnDefs": [ {
      targets: 5,6,
      render: $.fn.dataTable.render.moment('M-DD-YYYY,THH:mm','M/DD/YYYY')
    } ],
    "columns": [
      { "data": "properties.WELL_NAME"},
      { "data": "properties.UWI" },
      { "data": "properties.BASIN" },
      { "data": "properties.OPERATOR" },
      { "data": "properties.STATUS" },
      { "data": "properties.SPUD_DATE" },
      { "data": "properties.RIG_RELEASE_DATE" },
    ],
        dom: 'lfrtBip',
        buttons: [
            'copy', 'excel', 'pdf', 'csv'
        ]
  });
});

This is the date format

I've tried the examples on this page but I must be missing something because the table won't populate.

https://mail.datatables.net/forums/discussion/65118/how-to-format-date-type-dd-mm-yy

Removing this the table populates fine for me.

      "columnDefs": [ {
      targets: 5,6,
      render: $.fn.dataTable.render.moment('M-DD-YYYY,THH:mm','M/DD/YYYY')
    } ],

Kevins comment

If you are using columns you can just add the renderer to the appropriate column without needing to use columnDefs.

Unfortunately the links provided don't have examples of defined columns and rendering examples on them.

This doesn't work

{ "data": "properties.SPUD_DATE"
      type: 'date',
      render: $.fn.dataTable.render.moment('M-DD-YYYY,THH:mm','M/DD/YYYY')
      },

These have been added to the page.

<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.0.3/js/dataTables.dateTime.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/datetime-moment.js"></script>

Link to test case:

http://live.datatables.net/vuwiyuha/1/

kthorngren

Your test case isn't running because of this error:

Uncaught ReferenceError: moment is not defined

You need to load the moment.js library. After adding moment.js the script is getting this error:

Uncaught TypeError: $.fn.dataTable.render.moment is not a function

You need to load the datetime render JS plugin as described in the thread you linked to. That thread points to the Datetime render docs with provides the cdn for the plugin:

//cdn.datatables.net/plug-ins/1.10.24/dataRender/datetime.js

Now the result is Invalid date for that column. Looking at the JSON response the spud_date is a unix timestamp so the format you defined is not correct.

SPUD_DATE: 968025600000

Use the moment.js format to learn what format string you need to build. For unix timestamp it is just x.

I updated your example here:
http://live.datatables.net/vuwiyuha/2/edit

I added the needed moment.js and renderer/datetime.js and commented out the to you listed above that aren't needed. I updated your renderer to define the source datetime format as unix timestamp:

render: $.fn.dataTable.render.moment('x','M/DD/YYYY')

Also you don't need to define olumns.type so I commented it out. Datataables will automatically detect the column type.

Kevin

kthorngren

Also, if your dates don't sort correctly you will need to add the date sorting blog solution to your page.

Kevin

[Deleted User]

Awesome thanks Kevin it works a treat. Putting the final solution here for others to see.

$(document).ready(function() {
$('#example').DataTable( {
    "paging": true,
    "deferRender": true,
    "ajax":{
        "url":"https://services7.arcgis.com/ewmPU1HI7BJPXAG4/arcgis/rest/services/NOPIMS_Wells_Feature_Service/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson",
        "dataSrc": "features"
    },
    "columns": [
      { "data": "properties.WELL_NAME"},
      { "data": "properties.UWI" },
      { "data": "properties.BASIN" },
      { "data": "properties.OPERATOR" },
      { "data": "properties.STATUS" },
      { "data": "properties.SPUD_DATE",
      render: $.fn.dataTable.render.moment('x','M/DD/YYYY, HH:mm a')
      },
      { "data": "properties.RIG_RELEASE_DATE", 
       render: $.fn.dataTable.render.moment('x','M/DD/YYYY, HH:mm a')
      },
    ],
        dom: 'lfrtBip',
        buttons: [
            'copy', 'excel', 'pdf', 'csv'
        ]
  });
});

And I added these as mentioned.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.24/dataRender/datetime.js"></script>