DataTables example Format transform (Moment.js)

There might be times where your wire date/time data is not in ISO8601 format, but you want to display it to the end user in yet another format. This is handled by the datetime rendering function by supplying it three parameters:

  1. The original date format (please note that the parser is strict - you must exactly match the data format)
  2. The format you want to display
  3. The locale - used for internationalisation.

The datetime formatter works with both Moment.js and Luxon. In this example we are using Moment.js. For a full range of its formatting options, please see the Moment.js documentation.

See the renderers documentation for full details about the renderers available in DataTables.

NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 Nov 28, 08 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 Oct 9, 09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 Jan 12, 09 $86,000
Bradley Greer Software Engineer London 41 Oct 13, 12 $132,000
Brenden Wagner Software Engineer San Francisco 28 Jun 7, 11 $206,850
Brielle Williamson Integration Specialist New York 61 Dec 2, 12 $372,000
Bruno Nash Software Engineer London 38 May 3, 11 $163,500
Caesar Vance Pre-Sales Support New York 21 Dec 12, 11 $106,450
Cara Stevens Sales Assistant New York 46 Dec 6, 11 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 Mar 29, 12 $433,060
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
    $('#example').DataTable({
        columnDefs: [
            {
                targets: 4,
                render: DataTable.render.datetime('D MMM YYYY', 'MMM D, YY', 'en'),
            },
        ],
    });
});

In addition to the above code, the following Javascript library files are loaded for use in this example: