DataTables

DataTables Examples

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.0.2/js/dataTables.dateTime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>0</td>
              <td>2011-01-01</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2012-01-01</td>
            </tr>
            <tr>
              <td>2</td>
              <td>2013-01-01</td>
            </tr>
            <tr>
              <td>3</td>
              <td>2014-01-01</td>
            </tr>
            <tr>
              <td>4</td>
              <td>2015-01-01</td>
            </tr>
            <tr>
              <td>5</td>
              <td>2016-01-01</td>
            </tr>
        </tbody>
    </table>

JavaScript

$(function(){
  $.fn.dataTable.render.moment = function ( from, to, locale ) {
      // Argument shifting
      if ( arguments.length === 1 ) {
          locale = 'en';
          to = from;
          from = 'YYYY-MM-DD';
      }
      else if ( arguments.length === 2 ) {
          locale = 'en';
      }

      return function ( d, type, row ) {
          if (! d) {
              return type === 'sort' || type === 'type' ? 0 : d;
          }

          var m = window.moment( d, from, locale, true );

          // Order and type get a number value from Moment, everything else
          // sees the rendered value
          return m.format( type === 'sort' || type === 'type' ? 'x' : to );
      };
  };
  $('#example').DataTable({
        "columns": [
            { 'data': 'id' },
            { data: 'registered_date', render: $.fn.dataTable.render.moment( 'dddd D MMMM YYYY' ) }
        ]
    });
	

})