How to make jQuery getJSON work with Json.NET JavaScriptDateTimeConverter

Question

ASP.NET's Json serializer spits out "/Date(1240718400000)/" for DateTime. In my Knockout viewmodel (that uses getJson and the knockout mapper) I used to deal with this with a writable computed that would convert this to an actual javascript date and back.

However, I'm not very happy with this solution as it clutters my viewmodel too much.

I decided to go with Json.NET and it's JavaScriptDateTimeConverter that gives me Date(1240718400000). In theory this is great as it would give me observables with real javascript dates.

In practice, I can't get it to work :(

I know this is invalid Json, and it seems the internal Json parser that jQuery uses, does not accept this.

Is there a way to make jQuery getJson work with Json.NET JavaScriptDateTimeConverter?

Answer 1

I decided to take this approach:

My viewmodel has the JavaScriptDateTimeConverter on the DateTime property

[JsonConverter(typeof(JavaScriptDateTimeConverter))]
public DateTime TheEndOfTheWorld { get; set; }

My controller returns a JsonNetResult

return new JsonNetResult()
{
    Data = new MayaCalendar();
};

And finally, my javascript parses this to

$.ajax({
    url: "/Calendars/Maya",
    dataType: "text",
}).done(function (data) {
    var json = eval("(" + data + ")");
    var viewmodel = new WeirdCalendarViewModel(json);
    ko.applyBindings(viewmodel);
});

In short:

1. I'm using JavaScriptDateTimeConverter to return an invalid JSON string, that contains new Date(7919938800000) instead of "/Date(7919938800000)/"

2. I call the method with $.ajax, dataType "text" so jQuery won't try to parse the invalid JSON

3. I do the parsing myself, using eval(), before I pass the object to my knockout viewmodel.

4. Lunch

Pro:

• The knockout mapper gets to work with true javascript dates, instead of strings

Con:

• eval()

Answer 2

use this function to convert dates from json format to java script dates

function renderDate(value) {        
    var getDate;
    if (Date.parse(value)) {
        getDate = new Date(value);
    }

    //used for json date format like /Date(1224043200000)/
    else {
        getDate = new Date(parseInt(value.substr(6)));
    }
    //can decide the format here
    return ((getDate.getMonth() + 1) + "-" + getDate.getDate() + "-" + getDate.getFullYear());
}

Answer 3

you can serialize in Json.NET to get the same date format using

JsonSerializerSettings microsoftDateFormatSettings = new JsonSerializerSettings  {   DateFormatHandling = DateFormatHandling.MicrosoftDateFormat    };
        JsonConvert.SerializeObject(yourDataClass, microsoftDateFormatSettings);

I think start with that , as a small step And than continue to other changes.

Answer 4

Here's an excellent article that provides a global solution for dealing with JSON dates. It only deals with the ISO and .NET (/DATE(...)/) formats but could easily be modified to deal with JavaScriptDateTimeConverter's new Date(...) format as well.

The solution achieves this by overriding jquery's parseJSON method while maintaining backward compatibility. Pretty cool.