ASP.NET Parse DateTime result from ajax call to javascript date

Introduction:

I have a WebMethod on my ASP.NET page which returns a Person object.
One of the fields is Birthday which is a DateTime property.

WebMethod

[WebMethod]
public static Person GetPerson()
{
     Person p = new Person() {
         Id = 1,
         Name = "Test",
         Birthday = new DateTime(1988, 9, 13)
     };

     return p;
}

If I make the call using $.ajax() I get the response of the server with the Person object.

Ajax call

// Class instance
var Ajaxcalls = function () {

}

_$.extend(Ajaxcalls, {
    GetPerson: function (label) {
        var self = label instanceof _$ ? label : $(label);

        _$.ajax({
            url: 'Default.aspx/GetPerson',
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(JSON.stringify(data.d));
                self.html(new Date(Date.parse(data.d.Birthday)));
            }
        });
    }
});

Result:

{"__type":"AjaxTest.Classes.Person","Id":1,"Name":"Test","Birthday":"/Date(590104800000)/"}

Problem

How do I parse the Birthday [/Date(590104800000)/] to a javascript/jQuery date?
I tried new Date(Date.parse(data.d.Birthday)) but it gives me an Invalid date.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Use convertToJavaScriptDate() function that does this for you:

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

The convertToJavaScriptDate() function accepts a value in /Date(ticks)/ format and returns a date string in MM/dd/yyyy format.
Inside, the convertToJavaScriptDate() function uses a regular expression that represents a pattern /Date(([^)]+))/.
The exec() method accepts the source date value and tests for a match in the value. The return value of exec() is an array. In this case the second element of the results array (results[1]) holds the ticks part of the source date.

For example, if the source value is /Date(836418600000)/ then results[1] will be 836418600000.
Based on this ticks value a JavaScript Date object is formed. The Date object has a constructor that accepts the number of milliseconds since 1 January 1970.
Thus dt holds a valid JavaScript Date object.
The convertToJavaScriptDate() function then formats the date as MM/dd/yyyy and returns to the caller.

You can use the convertToJavaScriptDate() function as shown below:

options.success = function (order) {
 alert("Required Date : " + convertToJavaScriptDate(order.RequiredDate) + ", Shipped Date : " + convertToJavaScriptDate(order.ShippedDate));
};

Although the above example uses date in MM/dd/yyyy format, you can use other formats also once Date object is constructed.

reference : Link

Method 2

You could try this:

   _$.ajax({
        url: 'Default.aspx/GetPerson',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(JSON.stringify(data.d));
            var src = data.d.Birthday;
            //Remove all non-numeric (except the plus)
            src = src.replace(/[^0-9 +]/g, ''); 
            //Create date
            var birthDate = new Date(parseInt(src));
            self.html(birthDate);
        }
    });

JSFiddle

Method 3

If you’re open to using another JavaScript library:

http://momentjs.com/docs/#/parsing/asp-net-json-date/

Method 4

Another way of tackling this problem is to make a new element in your person class and then use that. Example

public class Person {
   public int Id {get;set;}
   public string Name {get;set;}
   public DateTime Birthday {get;set;}
   public string BirthdayFormat { get {
      return Birthday.toString("dd/MM/YYYY")
   }}
}

I would have thought this would be the best way as then all the formating is in one place and where possible you can use.
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/YYYY}")]

Above the Birthday element, so that displayFor will use the correct formatting.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0