Skip to content

Instantly share code, notes, and snippets.

@Kriztinemendoza
Last active October 8, 2023 13:49
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Kriztinemendoza/aa84a3dc8f579a380ce210c0ec08e034 to your computer and use it in GitHub Desktop.
Save Kriztinemendoza/aa84a3dc8f579a380ce210c0ec08e034 to your computer and use it in GitHub Desktop.
Fix Date Sorting on DataTables.net using moment.js
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th width="20%">Company</th>
<th>Created</th>
<th>Updated</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dai Weeks</td>
<td>Eu Foundation</td>
<td>11:10 Oct 18, 14</td>
<td>Sat, May 16th, 2015</td>
<td>08/06/2016</td>
</tr>
<tr>
<td>Jade Dale</td>
<td>Sit Amet Inc.</td>
<td>07:04 Apr 29, 14</td>
<td>Sat, July 25th, 2015</td>
<td>28/06/2015</td>
</tr>
<tr>
<td>Melanie Buckner</td>
<td>Tempus Lorem LLC</td>
<td>02:01 Jan 28, 15</td>
<td>Sun, October 11th, 2015</td>
<td>18/06/2018</td>
</tr>
<tr>
<td>Cyrus Haney</td>
<td>Phasellus Corp.</td>
<td>10:01 Jan 28, 14</td>
<td>Sat, December 28th, 2013</td>
<td>30/06/2017</td>
</tr>
</tbody>
</table>
</div>
</form>
<!-- Data table Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script>
<!-- Reference to handle dates: https://datatables.net/blog/2014-12-18-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$.fn.dataTable.ext.errMode = 'throw';
$.fn.dataTable.moment('HH:mm MMM D, YY');
$.fn.dataTable.moment('dddd, MMMM Do, YYYY');
$.fn.dataTable.moment('DD/MM/YYYY');
$('#example').DataTable();
});
</script>
</body>
</html>
@AugPav
Copy link

AugPav commented Feb 21, 2022

Best example. Thanks!!

@fmonclus
Copy link

Best example. Thanks!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment