Sorting Date Time (beginner with datatables and moment.js) work around problem

Jewell4400

Hello all i am having trouble getting DataTables to sort MM/DD/YYYY correctly. I want it to sort in this order YYYY then MM then DD. However it is sorting MM DD YYYY. I added a hidden paragraph section like below:
<td> <p hidden="hidden" class="sample_date"> 20170131 </P> 01/31/2017 </td>
<td> <p hidden="hidden" class="sample_date"> 20161201 </P> 12/01/2016 </td>
This fixes the sorting issue but it now prints the hidden fields on PDF CSV and PRINT buttons. I have tried adding moment.js and fixing the sorting issue but i don't understand how it works. Is there code to omit the hidden class from the print pdf and csv buttons?

kthorngren

Have you tried the moment sorting plugin:
https://datatables.net/plug-ins/sorting/datetime-moment

Kevin

allan

I'd suggest dropping the hidden p and just have the raw data. The Moment sorting plugin that Kevin mentioned will be able to parse your format (MM/DD/YYYY I think).

Allan

Jewell4400

okay so i have tried using moment.js along with the datetime.js and it doesnt sort properly ,with out the hidden tag. Below are my attempts. with the date coming in the format of MM/DD/YYYY (12/25/2016)
Attempt 1
JS
<script type="text/javascript" src="/javascript/moment.js"></script>
<script type="text/javascript" src="/javascript/datetime.js"></script>
<script type="text/javascript" >
$(function(){
$('#sample_results').DataTable({
"searching": true,
'paging': false,
dom: 'Bftip',
columnDefs: [ {
targets: 2,
render: $.fn.dataTable.render.moment( 'MM/DD/YYYY' )
} ] ,
buttons: [
'csv', 'excel', 'pdf', 'print'
]
}) ;
})
</script>

HTML

<table id="sample_results" >
<thead>
<tr id="header">
<th id="PUD">Sample Date</th>
</thead>
<tbody>
<c:forEach items="${sample_tests}" var="pt" varStatus="i">
<c:set var="background_color" value="#fff"/>
<c:set var="border_color" value="black"/>
<c:set var="v" value=""/>
<tr class="sample_data" id="<c:out value="${i.count}_row"/>" display:block;">
<td><c:out value="${pt.samp_pick_up_date}"/></td>
</tr>
</c:forEach>
</tbody>
</table>

Result: "Invalid date"
see result1.png

Jewell4400

Attempt 2
only changing JS

<script type="text/javascript" >
$(document).ready(function() {
$.fn.dataTable.moment( 'MM/DD/YYYY' );
$('#sample_results').DataTable({
"searching": true,
'paging': false,
dom: 'Bftip',
buttons: [
'csv', 'excel', 'pdf', 'print'
]
});
} );
</script>

_Result: _ i lose my sort options and buttons. See result2.png

Jewell4400

I felt like i was just missing one or two things in why this wasn't working in attempt# 1,
Changes made have the date come in as 'YYYYMMDD' (which sorts properly) and have this plug in render it differently on the screen. BINGO
Thanks Allan
The new incoming HTML for sample date is now 'YYYYMMDD' @ the line below in my html

<td><c:out value="${pt.samp_pick_up_date}"/></td>
new JS
$(function(){
$('#producer_results').DataTable({
"searching": true,
'paging': false,
dom: 'Bftip',
columnDefs: [ {
targets: 2,
render: $.fn.dataTable.render.moment( 'YYYYMMDD','MM/DD/YYYY' )
} ],
buttons: [ 'csv', 'excel', 'pdf', 'print' ]
}); })```