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

Question

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.

• Arunprasanth K V: try this code in your webmethod Birthday = new DateTime(1988, 9, 13).ToLongDateString()
• Mivaweb: Birthday is of type DateTime so I can't parse it to a string
• chridam: Follow this blog
• Mivaweb: @ArunPrasanth works like a charm, if you want post an answer for it!

Answer 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

• SFin: Here is the version with time included: function ToJavaScriptDateTime(value) { var pattern = /Date\(([^)]+)\)/; var results = pattern.exec(value); var dt = new Date(parseFloat(results[1])); return dt.getHours() + ":" + dt.getMinutes() + " " + ('0' + dt.getDate()).slice(-2) + "." + ('0' + (dt.getMonth() + 1)).slice(-2) + "." + dt.getFullYear(); }
• Terchila Marian: ive just tried ur method and i got an error jQuery.Deferred exception: Cannot read property '1' of null TypeError: Cannot read property '1' of null
• Arunprasanth K V: Can u provide me a jsfiddle??

Answer 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

Answer 3

If you're open to using another JavaScript library:

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

• Richard Housham: This is good, if you intend to use the date/time in the javascript ie. some manipulation

Answer 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.