JSON date is series of numbers, not displayed correctly in bootgrid

Question

I am using jquery and bootgrid in an MVC ASP.NET project.

Using Entity Framework, I get the data I want to display in the grid which looks like this in the database:

1    Portal    2017-01-16 23:09:54.420    testFirstName testLastName testCompanyName
2    Portal    2017-01-14 14:37:33.750    John    Doe    Walmart

However, when I convert it to Json and pass it back to bootgrid, the JSON looks like

{"current":1,"rowCount":2,"rows":
[{"LeadId":1,"ScanDate":"\/Date(-62135571600000)\/","FirstName":"testFirstName","LastName":"testLastName","Company":"testCompanyName"},
{"LeadId":2,"ScanDate":"\/Date(-62135571600000)\/","FirstName":"John","LastName":"Doe","Company":"Walmart"}],"total":2}

The ScanDate value is incorrect.

In my bootgrid view I have set the column like so:

<th data-column-id="ScanDate" data-formatter="date">Date Sent</th>

And the data-formatter is as follows:

return (date == null ? "" : date.substring(0, 10));

The substring works because I only see the first 10 characters of the numbers from the above JSON response.

Why is the datetime coming out as numbers?

I even tried to convert the value to a date in JavaScript

var convertedDate = new Date(date);

But convertedDate is undefined and convertedDate.getDay / getHour() is NAN.

Any ideas?

Possible duplicate of [How do I format a Microsoft JSON date?](http://stackoverflow.com/questions/206384/how-do-i-format-a-microsoft-json-date) — NineBerry, Jan 18 '17 at 01:20
Alternatively you might want to use Json.net by Newtonsoft to generate json instead of using the Microsoft libraries. — NineBerry, Jan 18 '17 at 01:22

score 1 · Answer 1 · answered Mar 09 '17 at 13:40

I have the same setup as you describe - ASP.NET MVC5, EF6, JsonResult action returning JSON and an Ajax call from my Bootgrid. One of the fields in my C# model which is converted to JSON is DateTime type.

This is how I solved it:

Install Moment.js library for working with dates in javascript (I recommend it in general also, not just for this case).

Add converter in javascript where you declare your Bootgrid:

converters: {
    datetime: {
        from: function (value) { return moment(value); },
        to: function (value) { return moment(FormatJsonDateToJavaScriptDate(value)).format("DD.MM.YYYY"); }
    }
}

Add a common function (I'm reusing it often). I got it from the link @NineBerry linked under your question.

function FormatJsonDateToJavaScriptDate(value) {
    var pattern = /Date\(([^)]+)\)/;
    var results = pattern.exec(value);
    var dt = new Date(parseFloat(results[1]));
    return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
}

Finally decorate this column in the view itself:

<th data-column-id="SomeDate" data-order="desc" data-converter="datetime">Some header Title</th>

What this does is it parse/converts the 'weird' date to a readable date and is then sent through Moment.js and additionally parsed into my locale which is DD.MM.YYYY.

JSON date is series of numbers, not displayed correctly in bootgrid

1 Answers1