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.

Solution 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

Solution 2

If you're open to using another JavaScript library:

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

Solution 3

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.

Solution 4

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

View more solutions

Comments

[Richard Housham]

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

[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??