How to fix sorting issue date in datatables column?

Question

I have datatables that contain of multiple column of dates. But all the column's date is not work perfectly when sorting asc and desc. Just to inform that all my date is in dd-mm-yyyy format. I am using a function to make it as dd-mm-yyyy.

I have trying to apply this reference but not help. I didn't know whether I am apply in the right way or not, please correct me.

HTML

<table id="projectListTable">
    <thead>
        <tr>
            <th>Project Name</th>
            <th>Plan Start</th>
            <th>Plan Finish</th>
        </tr>
    </thead>
</table>

JS

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "extract-date-pre": function(data) {
        if (data == null){
            return data;
        }
        else {
            new_data = data.split("T");
            new_data[0] = displayDate(new_data[0]);
            return new_data[0];
        }
    },
    "extract-date-asc": function(a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "extract-date-desc": function(a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});    

$('#projectListTable').DataTable({
    columns: [           
        { data : "project_name" },
        { data : "project_planned_start",        
            render: function(data){
                if (data == null){
                    return data;
                }
                else {
                    new_data = data.split("T");
                    new_data[0] = displayDate(new_data[0]);
                    return new_data[0];
                }
            }
        },
        { data : "project_planned_end",
            render: function(data){
                if (data == null){
                    return data;
                }
                else {
                    new_data = data.split("T");
                    new_data[0] = displayDate(new_data[0]);
                    return new_data[0];
                }
            }
        }     
    ],
    columnDefs: [
        {
            type: 'extract-date',
            targets: [1]
        },
        {
            type: 'extract-date',
            targets: [2]
        }
    ]
});

Green Machine Disposer Green Machine Disposer · Accepted Answer · 2020-04-09T14:38:53

If your actual date data is in ISO 8601 format.

Example: 2019-03-12T04:08:08.069Z

You may use in render function of each column.

{
    data: "project_planned_start",
    render: function(data, type) {
        if (type === 'sort') { // ADD this for sorting
            return data;
        }
        if (data == null) {
            return data;
        } else {
            new_data = data.split("T");
            new_data[0] = displayDate(new_data[0]);
            return new_data[0];
        }
    }
},

How to fix sorting issue date in datatables column?

1 Answers