Correctly format ASP.NET MVC dates for AngularJS

Question

I am using AngularJS to get data from an ASP.NET server application and display it on the client side. Here is what I'm getting:

ProjectID │ CreatedOn
══════════╪══════════════════════
13241     │ /Date(1338364250000)/   
13411     │ /Date(1338370907000)/

As you can see, the date is not being displayed correctly. I want to format the date as YYYY-MM-DD HH:MM:SS. How can I do this?

The HTML view:

<div ng-app ng-controller="FirstCtrl">
    <table>
        <thead>
            <tr>
                <td>
                    ProjectID
                </td>
                <td>
                    CreatedOn
                </td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="team in teams" class="thumbnail">
                <td>
                    {{team.ProjectID}}
                </td>
                <td>
                    {{team.CreatedOn}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

The action method:

public JsonResult GetUser()
{
   return Json(new { data = ProjectService.GetPrefixUsedCount(1).ToArray() });
}

The JSON result returned:

{"data":[{"ProjectID":13241,"CreatedOn":"\/Date(1338364250000)\/"},
{"ProjectID":13411,"CreatedOn":"\/Date(1338370907000)\/"}]

Jordan Gray · Accepted Answer · 2018-07-06 11:47:09Z

16

The quick fix

If changing the format in MVC isn't an option, you can do this:

{{ team.CreatedOn.slice(6, -2) | date: 'yyyy-MM-dd HH:mm:ss' }}

The key bit is .slice(6, -2)—it trims off all the extra junk leaving you with just the epoch time.

Want a filter?

If you use this a lot, you may prefer a custom filter. This one wraps the existing date filter:

.filter('mvcDate', ['$filter', $filter =>
  (date, format, timezone) =>
    date && $filter('date')(date.slice(6, -2), format, timezone)
]);

Now just replace the date filter with our custom one:

{{ team.CreatedOn | mvcDate: 'yyyy-MM-dd HH:mm:ss' }}

Here's a working example on JSFiddle.

edited Jul 6, 2018 at 11:47

answered Aug 14, 2014 at 16:41

Jordan Gray

16.5k3 gold badges56 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jrummell · Accepted Answer · 2017-06-26 15:23:30Z

4

Create custom filter as below:

app.filter("dateFilter", function () {
    return function (item) {
        if (item != null) {
            return new Date(parseInt(item.substr(6)));
        }
        return "";
    };
});

You can then apply the filter in your HTML

<tr ng-repeat="team in teams" class="thumbnail">
<td>{{team.CreatedOn | dateFilter | date:"dd-MM-yyyy"}}</td>

Hope it helps.

edited Jun 26, 2017 at 15:23

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

answered Jul 23, 2015 at 17:34

Om Mishra

755 bronze badges

Comments

Ganaraj · Accepted Answer · 2013-04-19 12:50:39Z

2

You should probably have a look at

http://docs.angularjs.org/api/ng.filter:date

It gives you all the necessary tools to modify and display Date in the format you want.

EDIT :

Could you modify your server to not send the date as Date(****) but just the **** is fine... If you send the date as Date(****), then you are left with 2 options both of which arent good.

TO eval the Date. NO eval.. its not good for your health.
Strip out the Date using a combination of regex.. Again, its possible.. but not recommended.

why send it in and strip it out? Why not just take it out of the server side itself?

answered Apr 19, 2013 at 12:50

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

4 Comments

Anil D Over a year ago

i tried this {{team.CreatedOn | date:'yyyy-MM-dd HH:mm:ss Z'}} but still display same /Date(1338364250000)/

Anil D Over a year ago

not sure how to strip escape character, will you please tell?

Dhaval Marthak Over a year ago

@AnilD docs define date formats, pass a valid format from server or create custom filter that parses your data to a valid date

Jordan Gray Over a year ago

"NO eval.. its not good for your health." I still love this comment. Truly advice for the ages!

Mathias F · Accepted Answer · 2013-05-13 08:38:28Z

1

In your ASP.NET MVC domain model have an extra property that renders the format expected by angular.

 public string CreatedOnJson
         {
             get
             {
                 return JsonConvert.SerializeObject(CreatedOn, new JavaScriptDateTimeConverter()).Replace("new Date(","").Replace(")","");

             }
         }

That way you can the use the angular date filter do display in way you prefer:

 {{team.CreatedOn | date:'yyyy-MM' }}

answered May 13, 2013 at 8:38

Mathias F

16k25 gold badges95 silver badges167 bronze badges

Collectives™ on Stack Overflow

Correctly format ASP.NET MVC dates for AngularJS

4 Answers 4

The quick fix

Want a filter?

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

The quick fix

Want a filter?

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related