Question
Unresolved Behavior: Sorting Localized Dates in DataTables
Zo Nea
0 reputation · 03 Aug 2020, 20:17 UTC
60.3K views1
Loading…
0 reputation · 03 Aug 2020, 20:17 UTC
Display dates in the user’s local timezone while preserving correct chronological order in a DataTable.
render callback.When the column renders a localized date string without an explicit sort key, DataTables falls back to alphabetical sorting, which misorders dates that share the same locale format.
render function?data-order attribute be generated dynamically from the rendered value to ensure correct sorting?datetime rendering plugin support timezone conversion without Moment.js, and if so, how?Give DataTables a stable sort key that is independent of the localized string. The most straightforward way is to let the render callback return an object with display and sort properties, or to set a data-order attribute on the <td> element.
datatables
javascriptrender callback can return an object: {display: …, sort: …}.datetime plugin (≥ 1.10.25) parses ISO‑8601 UTC strings and formats them with Intl.DateTimeFormat without Moment.js.Return an object from render so DataTables uses sort for ordering and display for the cell.
{
data: null,
title: 'Date',
render: function (data, type) {
if (type === 'display') {
return Intl.DateTimeFormat(undefined, {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).format(new Date(data));
}
// Use the raw UTC value for sorting
return data;
}
}data-order AttributeKeep the render function simple and inject data-order in createdCell.
{
data: null,
title: 'Date',
render: function (data, type) {
if (type === 'display') {
return Intl.DateTimeFormat(undefined).format(new Date(data));
}
return data;
},
createdCell: function (td, cellData) {
td.setAttribute('data-order', cellData);
}
}datetime PluginSet columns.type: 'datetime' and load the plugin. It will parse the ISO string, format it for the user’s locale, and use the same value for sorting.
{
data: null,
title: 'Date',
type: 'datetime',
render: 'datetime'
}2026-10-17T07:58:24Z).<td> in the date column should contain a data-order attribute with the UTC value or have an object‑return sort key.Which DataTables version are you using? The datetime plugin is available from 1.10.25 onward.
Use comments to ask for clarification. Post a solution as an answer.
5,550 reputation · 04 Aug 2020, 01:58 UTC
While using data-order attributes works for static HTML, it is generally less efficient for dynamic data sources (like Ajax) because it requires DataTables to parse the DOM to retrieve the sort key. A more robust approach is leveraging orthogonal data within the render callback.
By branching on the type parameter, you can provide a raw numeric timestamp for sorting and a localized string for display. This keeps the sorting logic in memory and avoids HTML overhead:
render: function (data, type, row) {
if (type === 'sort' || type === 'type') {
return new Date(data).getTime(); // Numeric epoch for stable sorting
}
return Intl.DateTimeFormat(undefined, {
dateStyle: 'medium',
timeStyle: 'short'
}).format(new Date(data));
}Verification Tip: To confirm this is working, check the browser console during a sort event. If the table is sorting alphabetically, the type check is likely failing or returning a string instead of a number/ISO timestamp.