Display Time Relatively in AngularJS

May 25, 2015
by Rahil Shaikh

In this tutorial we will learn to display time relatively in our Angular applications.

Displaying relative time has become quite popular in past few year, with all the major social networking websites showing relative time for timelines.

For example instead of showing a static time stamp for time, we show it as “a min ago“, and this will dynamically update on regular intervals depending on the time passed.

Angular-moment

To implement this feature we will use the “angular-moment” library. This library uses the awesome “moment.js” behind the scenes and provides us with handy directives and filters which we can use to display time relatively.

Setup

DEMO  DOWNLOAD

For the illustration I’ll be developing a quick demo app that will demonstrate the capabilities of this libraries.

To use angular-moment we need to first include the “moment.js” library and then “angular-moment.js” library.

CDN Links
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js

https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.1/angular-moment.min.js

Next we will define our angular module and then inject “angularMoment” as a dependency. We will also setup our controller.

app.js
(function(){
    angular.module('relativeTime',['angularMoment'])
   
    .controller('mainCtrl',[function(){
        var vm = this;
        vm.time = new Date();
    }])
})()

In our controller we assign the vm.time variable a new date-time object.

Markup

In our view we will first declare our app and controller. We also display the plain time returned by new Date().
 

index.html
    <body ng-app="relativeTime">
        <div class="col-md-6 col-md-offset-3" ng-controller="mainCtrl as main">
            <h3>Plain Time : {{main.time}}</h3>
           
            <!--- our relative time here --->
        </div>
       
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.1/angular-moment.min.js"></script>
        <script src="js/app.js"></script>
    </body>

Display relative time with Timeago directive

To display time relatively angular-moment provides us with am-time-ago directive. This directive takes the reference-time as an attribute and then displays relative time with respect to the reference-time provided. Add the below to your code to display time relatively.

index.html
<h3>Time AGO Directive</h3>
<span am-time-ago="main.time"></span>

This kind of formatting is mostly used when displaying timelines on social networks or any other places where the content is updated frequently.

Display as calendar format with amCalendar filter

amCalendar filter formats the date and displays the relative date, with respect to the reference date provided. This depends on how close the reference-time’s date is to the current date.
eg: Last Monday at 4:30 AM, Yesterday at 4:30 AM, Today at 4:30 AM etc.
Visit here to find out more.
The basic usage is as below.

index.html
<h3>Calendar Filter</h3>
<span >{{main.time|amCalendar}}</span>

This kind of formatting could be used to display dates for events, occasions gatherings.

There are more formatting or display options available with angular-moment, visit the Github page.

Demo App

index.html
<!DOCTYPE html>
<html>
    <head>     
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
        <link href="css/style.css" rel="stylesheet" media="screen"/>
    </head>
    <body ng-app="relativeTime">
        <div class="col-md-6 col-md-offset-3 signupform" ng-controller="mainCtrl as main">
            <h3>Plain Time : {{main.time}}</h3>
           
            <!--- our relative time here --->
       
            <div class="media bg-info">
                <div class="pull-left">
                     <a href="#"><img class="media-object" ></a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">Time AGO Directive</h4>
                    This is current time minus 2 hours!
                    <br>
                    <small am-time-ago="main.hourAgo" class="text-danger"></small>
                </div>
            </div>
           
            <div class="media bg-info">
                <div class="pull-left">
                     <a href="#"><img class="media-object" ></a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">Time AGO Directive</h4>
                    Please wait a miniute and observe the below time dynamically updating.
                    <br>
                    <small am-time-ago="main.time" class="text-danger"></small>
                </div>
            </div>
           
           
            <div class="media bg-info">
                <div class="pull-left">
                     <a href="#"><img class="media-object" ></a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">Calender Filter</h4>
                    We have organized an event and its happening right now.
                    <br>
                    <span class="text-danger">{{main.time|amCalendar}}</span>
                </div>
            </div>
        </div>
       
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.1/angular-moment.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
app.js
(function(){
    angular.module('relativeTime',['angularMoment'])
   
    .controller('mainCtrl',[function(){
        var vm = this;
        vm.time = new Date();
       
        vm.hourAgo = new Date();
        vm.hourAgo.setHours(vm.time.getHours() - 2);
    }])
})()

DEMO  DOWNLOAD

Conclusion

Human brain interprets relative time faster than actual time stamp. Using this effect in our applications would make it a lot more easier to our users to relate the time of the post/event. Angular-Moment provides a cool set of directives and filters that helps us to implement this feature in our application with ease. So go ahead and try it in your Angular Projects.
 

There are a lot more other directives and filter provided by Angular-Moment that allows us to play with time. Read here.

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment