AngularJS. Convert tag value (Unix time to human-readable time)

Question

I am getting data from a database and displaying it:

    <ul>
       <li ng-repeat="item in items>
          <mydate>{{item.date}}</mydate>
        </li>
    </ul>

Where {{item.date}} is a Unix date such as 1374843600. How can I set the date format using AngularJS directives? Is it possible?

When I tried to do it, I was getting a value of tag mydate -{{item.date}}

Could you change your answer? The given answer displays the wrong time by a factor of 1000. See Sergei Basharov's answer. — Joe B., May 28 '17 at 04:58

Sergei Basharov · Answer 1 · 2015-02-15T11:37:37.960

217

I have faced the issue with unix time formatted as a number of seconds from the epoch start or as a number of milliseconds that is used in JavaScript. So strictly speaking, AngularJS doesn't convert Unix timestamp to Date, but a number with milliseconds, which is 1000 times larger, so first you will have to multiply your input number by 1000, like this:

<mydate>{{item.date * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}</mydate>

Otherwise your date will be wrong.

edited Feb 15 '15 at 11:37

answered Sep 09 '13 at 10:56

Sergei Basharov

51,276
73
200
335

6

Thanks for your post. I was struggling with this too, and had no idea angular/javascript counts the milliseconds and not seconds. The unix time is universal and is the SECONDS after the big bang... – pat Nov 21 '13 at 18:04
I could have spent hours without coming to your answer. Thanks! – MarcoS Feb 14 '15 at 23:09
Thanks for the great answer, exactly what I needed. It's amazing how relevant these questions stay, even two years later! Angular can be ***really*** frustrating some times – Unknown Coder Apr 16 '15 at 06:44
2

@stormpat Unix Time is not the number of Seconds after the BigBang. Its only the number of seconds after `00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970`. I dont think Bigbang happened only `1432897853 ` seconds ago. – Neel May 29 '15 at 12:12
Im pretty sure the big bang happened when the early UNIX systems begun incrementing, as string theory predicts, with 60Hz. The theory also predicts when the universe will reverse its expansion, it will happen at 15:30:08 UTC on Sun, 4 December in the year 292,277,026,59. – pat May 29 '15 at 12:21
By still getting upvotes to this answer I am surprised if it's still in the same state as was 2 years ago. – Sergei Basharov Oct 18 '15 at 16:10
1

@Neel: i strongly disagree! Are you really trying to convince us that there was anything before Jan 1, 1970?! You must be joking! – Jörn Berkefeld Mar 09 '16 at 10:08

EpokK · Accepted Answer · 2017-12-15T15:12:45.573

90

Use format date filter like this:

<mydate>{{item.date * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}</mydate>

Reference

edited Dec 15 '17 at 15:12

answered Jul 29 '13 at 13:16

EpokK

38,062
9
61
69

2

**NO. Downvoted.** The question asks specifically for a unix timestamp which is NOT milliseconds - it's SECONDS. You must multiply the unix timestamp by `1000` like this: `{{item.date * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}` – Augie Gardner Sep 13 '17 at 04:38

score 5 · Answer 3 · answered Mar 18 '16 at 10:35

If you have a Unix timestamp, you'll probably have to multiply your timestamp by 1000 since the Unix timestamp is in seconds and AngularJs date filter needs milliseconds.

vm.milliseconds = Date('1441981121' * 1000);

then use $filter() function

var date = $filter('date')(vm.milliseconds, 'd MMMM yyyy');

or you can use in ng-bind

<span ng-bind="myController.milliseconds | date : 'd MMMM yyyy'"></span>

score 3 · Answer 4 · answered Jul 29 '13 at 13:15

3

You should use the date filter that is already provided by angular: here

answered Jul 29 '13 at 13:15

AlwaysALearner

43,759
9
96
78

score 3 · Answer 5 · edited Nov 16 '16 at 08:33

3

 yourapp.filter('timestampToDate', function () {
    return function (timestamp) {
        var date = new Date(timestamp * 1000);
        var dateObject = date.getFullYear() +'/'+ ('0' + (date.getMonth() + 1)).slice(-2) +'/'+ ('0' + date.getDate()).slice(-2);
        return dateObject;
    };
});

Usage:
{{timestamp | timestampToDate}}

edited Nov 16 '16 at 08:33

George Kagan

5,913
8
46
50

answered Dec 25 '14 at 04:08

Phong Dao

139
1
1
14

score 1 · Answer 6 · answered Nov 16 '16 at 08:30

There is directive to that called rsTime.

    <rs-time start-time="1478513323" digital-format="'ddd MMM d h:mm TT'"></rs-time>

Check demo at Plunker .

Below are different formates of time:

 M/d/y -  11/7/2016

 HH:mm:ss - 16:02:31 (24hrs formate)

 hh:mm:ss TT - 04:03:10 PM

 ddd MMM d h:mm TT  - Mon Nov 7 at 4:04 PM

For documentation visit Github

AngularJS. Convert tag value (Unix time to human-readable time)

6 Answers6

Linked