Angular.js format date from json object

Question

My json response look like this:

[{"Id":"dab4580b-e24d-49f8-9fd5-2e968b10d3b5","Title":"MVVM-Sidekick 入精","CreatedOn":"\/Date(1390272893353)\/","IsChecked":false},{"Id":"66a0f134-e240-4cc4-96fa-ac3807853ca7","Title":"Windows Phone 开发入精","CreatedOn":"\/Date(1390018447080)\/","IsChecked":false}]

the "CreatedOn" date is in this kind of format: '/Date(1390272893353)/'

when I bind this result to html table, the date cannot be formatted:

<td>{{item.CreatedOn | date: 'yyyy-MM-dd HH:mm'}}</td>

still gives me:

/Date(1390272893353)/

I don't want to change any code on the server side (don't modify the json string), what's the best way to format this date?

@haki {{1390272893353 | date: 'yyyy-MM-dd HH:mm'}} is the expecting result, which is "2014-01-21 10:54" — Edi Wang
– Edi Wang, Commented Mar 16, 2014 at 9:46
This may be helpful, if you don't want to test each property. — Pavel Voronin
– Pavel Voronin, Commented Oct 26, 2016 at 12:39

Tech · Accepted Answer · 2014-09-15 20:20:51Z

30

I actually combined the answers from @Charminbear and @Nikos ending up in this filter which works quite nice and is quite clear without the regex:

myApp.filter("jsDate", function () {
    return function (x) {
        return new Date(parseInt(x.substr(6)));
    };
});

This makes it possible to write

{{ $scope.item.CreatedOn | jsDate | date:"yyyy-MM-dd" }}

answered Sep 15, 2014 at 20:20

Tech

6611 gold badge8 silver badges14 bronze badges

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

2 Comments

Vucko Over a year ago

This converts every date into 1/1/1970 for me :/

Vucko Over a year ago

Fixed it somehow, it was not long it was some kind of datetime. all it took was this return new Date(parseInt(x)); creating a new Date from the one in json. Thanks tho! You guided me the right way. I'm new to front-end in general, please don't yell at me if this was something basic ;D

Nikos Paraskevopoulos · Accepted Answer · 2016-07-18 09:42:49Z

24

One option is to write another filter and put it in the chain. E.g.:

app.filter("mydate", function() {
    var re = /\/Date\(([0-9]*)\)\//;
    return function(x) {
        var m = x.match(re);
        if( m ) return new Date(parseInt(m[1]));
        else return null;
    };
});

Basically it uses the regular expression to parse the string and make a Date (if the format is different than the one shown, you will have to tweak the regular expression).

Use it as:

<td>{{item.CreatedOn | mydate | date: 'yyyy-MM-dd HH:mm'}}</td>

edited Jul 18, 2016 at 9:42

answered Mar 16, 2014 at 9:50

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

1 Comment

Yasser Shaikh Over a year ago

does not work. new Date(parseInt(x.substr(6))) this did work.

Deepak · Accepted Answer · 2017-02-24 05:47:28Z

6

I know I'm late for the party. But I want to tell what helped me was :-

<td>{{item.yourdatefield.slice(6,-2) | date:'dd-MMM-yyyy' }}</td>

Hope it'll help lazy coders like Me. :)

answered Feb 24, 2017 at 5:47

Deepak

3766 silver badges23 bronze badges

1 Comment

Parinda Rajapaksha Over a year ago

Easy peasy..nice (Y)

Community · Accepted Answer · 2017-05-23 12:32:04Z

5

The Angular Date-Filter expects a JS-Date. So you need to parse the JSON Date before giving it to the filter.

Try this:

<td>{{item.CreatedOnParsed | date: 'yyyy-MM-dd HH:mm'}}</td>

And in your callback-method of the response, do something like:

$scope.item.CreatedOnParsed =  new Date(parseInt(item.CreatedOn.substr(6)));

as it is shown in this Answer

EDIT As is just saw by the comments of your post, even just the timestamp is enough for the Date-Filter, so even this should be enough:

$scope.item.CreatedOnParsed =  item.CreatedOn.substr(6);

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 16, 2014 at 9:46

David Losert

4,8221 gold badge28 silver badges31 bronze badges

2 Comments

Edi Wang Over a year ago

thanks, your solution works! but i prefer @Nikos Paraskevopoulos 's script better.

Edi Wang Over a year ago

i just find "<td>{{item.CreatedOn.substr(6,13) | date: 'yyyy-MM-dd HH:mm'}}</td>" also works. but it isn't a nice code.

Jaydeep Gondaliya · Accepted Answer · 2016-06-28 05:40:06Z

2

//input - "DocDate":"\/Date(1127318400000-0000)\/"
-------

<tr dir-paginate="user in SalesOrder>
    <td>{{user.DocDate | jsonDate}}</td>
</tr>

controller
----------
app.filter('jsonDate', ['$filter', function ($filter) {
    return function (input, format) {
        return (input) 
               ? $filter('date')(parseInt(input.substr(6)), format) 
               : '';
    };
 }]);

answered Jun 28, 2016 at 5:40

Jaydeep Gondaliya

3216 silver badges17 bronze badges

Comments

Wilco · Accepted Answer · 2015-09-12 18:30:21Z

Another, possibly better option, is to parse the date as you recieve the JSON.

I use the following function:

(function() {
    if (JSON && !JSON.parseWithDate) {
        JSON.parseWithoutDate = JSON.parse; //Store the original JSON.parse function

        var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/;  
        var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;  

        JSON.parseWithDate = function (json) {  
            /// <summary>  
            /// parses a JSON string and turns ISO or MSAJAX date strings  
            /// into native JS date objects  
            /// </summary>      
            /// <param name="json" type="var">json with dates to parse</param>          
            /// </param>  
            /// <returns type="value, array or object" />  
            try {  
                var res = JSON.parseWithoutDate(json,
                function (key, value) {  
                    if (typeof value === 'string') {  
                        var a = reISO.exec(value);  
                        if (a)  
                            return new Date(Date.UTC(+a[1], +a[2] - 1,   
                                                     +a[3], +a[4], +a[5], +a[6]));  
                        a = reMsAjax.exec(value);  
                        if (a) {  
                            var b = a[1].split(/[-+,.]/);  
                            return new Date(b[0] ? +b[0] : 0 - +b[1]);  
                        }  
                    }  
                    return value;  
                });  
                return res;  
            } catch (e) {  
                // orignal error thrown has no error message so rethrow with message  
                throw new Error("JSON content could not be parsed");  
                return null;  
            }  
        };  
        JSON.dateStringToDate = function (dtString) {  
            /// <summary>  
            /// Converts a JSON ISO or MSAJAX string into a date object  
            /// </summary>      
            /// <param name="" type="var">Date String</param>  
            /// <returns type="date or null if invalid" />   
            var a = reISO.exec(dtString);  
            if (a)  
                return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3],   
                                         +a[4], +a[5], +a[6]));  
            a = reMsAjax.exec(dtString);  
            if (a) {  
                var b = a[1].split(/[-,.]/);  
                return new Date(+b[0]);  
            }  
            return null;  
        };  
        JSON.stringifyWcf = function (json) {  
            /// <summary>  
            /// Wcf specific stringify that encodes dates in the  
            /// a WCF compatible format ("/Date(9991231231)/")  
            /// Note: this format works ONLY with WCF.   
            ///       ASMX can use ISO dates as of .NET 3.5 SP1  
            /// </summary>  
            /// <param name="key" type="var">property name</param>  
            /// <param name="value" type="var">value of the property</param>           
            return JSON.stringify(json, function (key, value) {  
                if (typeof value == "string") {  
                    var a = reISO.exec(value);  
                    if (a) {  
                        var val = '/Date(' +   
                                  new Date(Date.UTC(+a[1], +a[2] - 1,   
                                           +a[3], +a[4],   
                                           +a[5], +a[6])).getTime() + ')/';  
                        this[key] = val;  
                        return val;  
                    }  
                }  
                return value;  
            })  
        };  
        //Make Date parsing the default
        JSON.parse = JSON.parseWithDate;
    }
})();

Which is taken from here: http://codepaste.net/i89xhc, except that I overwrite the standard JSON.parse function with this version that parses the date. This means that Angular will parse ASMX dates automatically from all JSON it sees.

You could also write a custom transform using angular $http transformations. See: https://docs.angularjs.org/api/ng/service/$http

Bob Sheehan · Accepted Answer · 2017-10-26 13:18:44Z

0

Assuming that is a .net JSON date and you are using moment.js. Then leverage it's functionality (defined here ) into a filter

 myApp.filter('JSONdate', [
       '$filter', function ($filter) {
           return function (input, appformat) {
               if (input != null) {
                   return moment(input).format(appformat);
                   // use the line below if you want to leverage the standard date filter on top of this 
                   // return $filter('date')(new Date(moment(input)), appformat);
               } else {
                   return '';
               }
           };
       }])

answered Oct 26, 2017 at 13:18

Bob Sheehan

1601 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular.js format date from json object

7 Answers 7

2 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related