format date US 'MM/DD/YYYY" in DataTables

Question

https://communitychessclub.com/examine.php DataTables with moment.js is sorting date as a string, not a date. How can I get a sample date of "08/23/2018" to sort properly? That is, I want to sort "mm/dd/yyyy". I simply can't get this to work.

<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

<script src="js/dataTables.keepConditions.min.js"></script>

<script>
$.fn.dataTable.moment = function ( format, locale ) {
var types = $.fn.dataTable.ext.type;

// Add type detection
types.detect.unshift( function ( d ) {
    return moment( d, format, locale, true ).isValid() ?
        'moment-'+format :
        null;
} );

// Add sorting method - use an integer for the sorting
types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
    return moment( d, format, locale, true ).unix();
};
};

</script>


<script>

$(document).ready(function() {

$.fn.dataTable.moment( 'MM/DD/YYYY' );  

$('#cccr').DataTable( {


"ajax": "assets/games.ajax",
"pageLength": 25,
"order": [[ 8, "desc" ]],

"columns": [

{ "data": "Date", "width": "7rem", },
{ "data": "Event" },
{ "data": "ECO" },
{ "data": "White" },
{ "data": "WhiteElo" },
{ "data": "Black" },
{ "data": "BlackElo" },
{ "data": "Result" },
{ "data": "game", visible : false }
]

} );

   } );

</script>

I tried a static table and it seems to work fine. Here's a fork: jsfiddle.net/rqtmy2pj And I don't see a $.fn.dataTable.moment( 'MM/DD/YYYY' ); defined in the referred webpage. Can you make sure that's defined? — Shashank
– Shashank, Commented Aug 23, 2018 at 17:33

Shashank · Accepted Answer · 2018-08-23 21:00:01Z

1

Found the culprit. It's in the data - following row:

{
  "game": "5533",
  "Date": "05/1/2010",
  "Event": "RCC FIDE RR #2",
  "ECO": "C56",
  "White": "Nikolayev, Igor (FM)",
  "WhiteElo": "2367",
  "Black": "Jones, Aaaron",
  "BlackElo": "1966",
  "Result": "1-0"
},

You have the format DD to read but the date here is of the format D which makes it a different format which ends up messing the table sorting.

Here's a plunkr including above row as is:

http://plnkr.co/edit/eYRVBr8P4g7Ua4Z7K6JG?p=preview

Fixing the above date format, here's a new plunkr:

http://plnkr.co/edit/zPF9LDZjAAZeqXIJ3XOF?p=preview

And as Alan (DataTables author) suggests in this comment:

At the moment the plug-in only supports a single format in each column. If could probably be modified if you needed to support two or more formats in a single column.

Using a common format for all the dates will help you fix the issue.

Hope this helps.

answered Aug 23, 2018 at 21:00

Shashank

5,6701 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

verlager Over a year ago

Fantastic ... good eye. I would have thought there would be provisions in the dataTables to sort even with this error, but I guess not. One errant byte screws up 2200 json records seems ... unlikely. But I tried your fix and you were correct. Thank you so much and have a nice day.

Shashank Over a year ago

Exactly. One minor thing messes up! Anyway, glad I could help. You too have a good night! Btw I'm from NY too. :)

Collectives™ on Stack Overflow

format date US 'MM/DD/YYYY" in DataTables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related