How to format date displayed in Datatable

Question

I have a function that displays objects in my array using datatables. I'm a bit a problem with changing the date and time format from ISODate to human readable format.

myData

var datas = {“rows” : [{_id: "2017-01-03T00:00:00.000Z", Humidity: 24, Temperature: 18},

{_id: "2017-01-04T00:00:00.000Z", Humidity: 23.071428571428573, Temperature: 18.928571428571427} ]}

JS script

var table = $('#myTable').DataTable( { 
    data: datas.rows,
            "columns": [
                { data: "_id" },
                { data: "Temperature" },
                { data: "Humidity" }

            ]
    });

Thanks for your anticipated help.

Unaunabated

What does human-readable means precisely in your case? – Doughman

datatables.net/reference/option/columns.render to change how values are displayed, and momentjs.com would be helpful to get the date in the format you want. – Undertaker

@Doughman YYYY:MM:DD HH:MM that what i mean. – Unaunabated

@PaulAbbott thanks for the link. I have 3 columns but I only want to render one. Does the render function come immediately after the specific column or do I add it at the end of the {data: "Humidity"} ?? – Unaunabated

@PaulAbbott Can you show me an example of how I can construct this? The link didn't give me what I was looking for. – Unaunabated

Answer 1

As noted by @Paul Abbott above, momentjs and a render function should see you right:

var datas = {
    "rows": [
        {
            _id: "2017-01-03T00:00:00.000Z", 
            Humidity: 24, 
            Temperature: 18
        },
        {
            _id: "2017-01-04T00:00:00.000Z", 
            Humidity: 23.071428571428573, 
            Temperature: 18.928571428571427
        } 
    ]
}


var table = $('#myTable').DataTable( { 
    data: datas.rows,
    "columns": [
        { 
            data: "_id",
            render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM-DD-YYYY HH:mm");
            }
        },
        { 
            data: "Temperature" 
        },
        { 
            data: "Humidity" 
        }

    ]
});

Otti

Thanks for your response. I'm getting an error TypeError: undefined is not an object (evaluating '$.fn.dataTable.render'). Although I included the datetime cdn in my HTML file. – Unaunabated

Apparently my scripts weren't in order but i'm still getting an error moment is not a function – Unaunabated

Without being able to see your script I can't tell what's going on. This is a working example: jsfiddle.net/annoyingmouse/hpgafeys. You'll need to include, in this order, jQuery, DataTables and MomentJS. – Otti

Thank you! I keep getting moment is not a function. Could this because i'm not loading the scripts in the right order? – Unaunabated

Quite possibly. Did you check the Fiddle? Do you want to put your script up on JSFiddle so we can check it together? – Otti

@annoyingmosuse Yes I did. I think I see what I was missing. I didn't include the moment with locales script. – Unaunabated

Thank you so much @annoyingmouse. This is a bit of scope but is there a way I can round up figures in the table? – Unaunabated

Of course, again use a render function and this: developer.mozilla.org/en/docs/Web/JavaScript/Reference/… – Otti

I just figured the dates are a bit off. The table produces dates a day before the actual date. See your jsfiddle. A bug maybe? – Unaunabated

Not an issue for me, I'm getting the 3rd and 4th. The dates are in UTC, it might be because you're in a different region? – Otti

Okay that's a bit odd. I have used different date formats getting the same thing. – Unaunabated

This essentially kills the sorting feature – Andromeda

@Sandor, just added some more dates with more varied values and I'm able to sort... what's is your particular issue? jsfiddle.net/annoyingmouse/hpgafeys – Otti

@Otti please see https://jsfiddle.net/ca8w78y1/ for reference – Andromeda

@Sandor, I stand corrected - does this do what you need: jsfiddle.net/annoyingmouse/cgqqLaw1 – Otti

@annoyingmouse: mea culpa, the if(type === "sort" || type === "type") did the trick however please be aware that there is an error in the answer since the function(d) definition instead of function (data, type, row) – Andromeda