datetime-moment.js with SharePoint date data

mccdg

Thanks to a lot of info on this site (and others) I am successfully using DataTables to display info from our SharePoint 2013 lists using REST/JSON. However - I have run into an issue with formatting date date that I cannot figure out using the Ultimate Date/Time plug-in. The data being returned is in ISO8601 format (2016-03-09T12:51:09Z) so from what I can tell that data should be automatically recognized as date data and formatted the way I choose. I basically just want to drop all of the time data and use MM/DD/YYYY for the date format. I am hoping I am missing something simple or obvious - I am new to jQuery/JavaScript so that happens a lot. I am not able to provide a link to the page and I can't provide access to the SharePoint data so I am not sure how to post a test case. (I do see the Debugger - but the example page http://debug.datatables.net/ihatik gives a 404 and i need to make sure the underlying SharePoint data is not being sent). The code I have so far is below - any help is greatly appreciated.

Thanks,
Drew

<script type="text/javascript" charset="utf8" src="/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="/datetime-moment.js"></script>

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="pending_actions">
<thead><th>Title</th><th>Task Request</th><th>Task ID</th><th>Contract</th><th>Assigned To</th><th>Start Date</th><th>Due Date</th><th>Status</th></thead>
</table>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("PendingActions");

function PendingActions()
{
$.fn.dataTable.moment('DD, MM, YYYY');
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Tasks')/items?$select=Title,Task_Request,TaskID,Contract,AssignedTo/Title,StartDate,DueDate,Status&$expand=AssignedTo&$filter=Status eq 'Not Started'",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$('#pending_actions').dataTable({
"destroy": true,
"processing": true,
"data": data.d.results,
"order": [[2, "desc"]],
"columns": [
{ "data": "Title" },
{ "data": "Task_Request" },
{ "data": "TaskID" },
{ "data": "Contract" },
{ "data": "AssignedTo.Title" },
{ "data": "StartDate" },
{ "data": "DueDate" },
{ "data": "Status" },
]
});
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
</script>

allan

The date time sorting plug-in is for sorting the existing format only. if you want to change the format of the data, I would suggest you take a look at the datetime renderer.

The renderer documentation will also be useful.

Allan

mccdg

Well that makes a lot more sense. I think I got so lost in the moment.js docs that I didn't realize that I was looking at the wrong plug-in all along. Thank you. Changing to datetime.js and adding it in like this:
```
{
"data": "StartDate",
"render": $.fn.dataTable.render.moment( 'Do MMM YYYYY' )
},

Gives me "Invalid Date" in that column. The data that is returned from the REST query is:
<d:StartDate m:type="Edm.DateTime">2015-03-30T15:51:36Z</d:StartDate>

Which seems like it should be auto-detected just fine as ISO8601. I have also tried forcing the input format with YYYY-MM-DDTHH:mm:ssZ (and multiple variations) but I continue to get "Invalid Date"

This might be more of a SharePoint/moment.js issue at this point but if you have any ideas please let me know.

Thank you!

mccdg

In looking at Chrisrbloom's code from this forum post (https://datatables.net/forums/discussion/28158/date-type-is-not-showing-correct-date-when-edited) I was able to use the following to display dates correctly:

"data": "StartDate",
 "render":
                            function( data, type, row, meta){
                                var ThisDate = moment(new Date(data)).format("Do MMM YYYY");
                                return ThisDate
}

Unfortunately - with my newbie ignorance I don't really understand what it is doing that is different than what I was trying with:

{
"data": "StartDate",
"render": $.fn.dataTable.render.moment( 'Do MMM YYYYY' )
},

So - I do have a working table but I wonder if I can make it simpler than I have. Thank you for any additional assistance!

allan

Its possibly related to the fact that the plug-in renderer has Moment's strict mode enabled by default.

However, you've got it working, so let's go with that! :-)

Regards,
Allan

axel.osorio

Thank you very much for your post.
The invalid date was my problem too, and after I can solve this, I got a "cannot restart datatable" error, but your solution helps me a lot.
I put this in the column definition, in the render of the column:
"columns" : [
{
"data" : "realDateFromJsonData",
"render":
function( data, type, row, meta){
var ThisDate = moment(new Date(data)).format("dd/MM/YYYY");
return ThisDate;
}