62

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}}

1
  • Could you change your answer? The given answer displays the wrong time by a factor of 1000. See Sergei Basharov's answer. Commented May 28, 2017 at 4:58

6 Answers 6

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.

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

7 Comments

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...
I could have spent hours without coming to your answer. Thanks!
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
@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: i strongly disagree! Are you really trying to convince us that there was anything before Jan 1, 1970?! You must be joking!
|
90

Use format date filter like this:

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

Reference

1 Comment

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

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>

Comments

3

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

Comments

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}}

Comments

1

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.