Convert birthday to age in angularjs

Question

I want to display age of all my users to grid. I am reading data from facebook.I am not storing it at anywhere.

i am displaying date like :

{{ friend.birthday }}

How can i display age instead of displaying birthday.

if it is possible to create filters than how to create filter and how to apply it.

score 35 · Accepted Answer · edited May 23 '17 at 11:46

You can implement a function:

Controller:

$scope.calculateAge = function calculateAge(birthday) { // birthday is a date
    var ageDifMs = Date.now() - birthday.getTime();
    var ageDate = new Date(ageDifMs); // miliseconds from epoch
    return Math.abs(ageDate.getUTCFullYear() - 1970);
}

HTML

{{ calculateAge(friend.birthday) }}

Or a filter:

app.filter('ageFilter', function() {
     function calculateAge(birthday) { // birthday is a date
         var ageDifMs = Date.now() - birthday.getTime();
         var ageDate = new Date(ageDifMs); // miliseconds from epoch
         return Math.abs(ageDate.getUTCFullYear() - 1970);
     }

     return function(birthdate) { 
           return calculateAge(birthdate);
     }; 
});

HTML

{{ friend.birthday | ageFilter }}

Age algorithm taken from this SO answer.

[EDIT] If the age is less than 1 year, and you want to show months, you can modify the ageFilter to calculate the month difference:

app.filter('ageFilter', function() {
     function calculateAge(birthday) { // birthday is a date
         var ageDifMs = Date.now() - birthday.getTime();
         var ageDate = new Date(ageDifMs); // miliseconds from epoch
         return Math.abs(ageDate.getUTCFullYear() - 1970);
     }
     function monthDiff(d1, d2) {
       if (d1 < d2){
        var months = d2.getMonth() - d1.getMonth();
        return months <= 0 ? 0 : months;
       }
       return 0;
     }       
     return function(birthdate) { 
           var age = calculateAge(birthdate);
           if (age == 0)
             return monthDiff(birthdate, new Date()) + ' months';
           return age;
     }; 
});

Demo Plunker - Age Function
Demo Plunker - Age Filter
Demo Plunker - Age Filter with Months < 1 year

That works well. Thanks for this solution. However, in cases where a baby's age is less than 1 year, instead of showing Age as '0', how can I modify this so it shows in months like `6 months` for age? — Neel, Apr 05 '15 at 09:36
This solution does not work in some cases. It outputs 0 years for birthday 1.1.2015 on 26.01.2016 (day.month.year). — mitjap, Jan 26 '16 at 22:53
It does work... month starts at index 0. So, month 0 is Jan, month 1 is Feb. Did you make the mistake of thinking 1 is Jan? — Michael Kang, Jan 27 '16 at 02:07

score 4 · Answer 2 · answered May 02 '16 at 07:42

If you're value is just for example "05/01/2016". This will be a useful code to convert the date to birthday.

AngularJS

app.filter('ageFilter', function(){
    return function(birthday){
        var birthday = new Date(birthday);
        var today = new Date();
        var age = ((today - birthday) / (31557600000));
        var age = Math.floor( age );
        return age;
    }
});

HTML

{{ relationTypePreDefined.birthdate | ageFilter }}

By the way I used this solution to convert a date coming from a jquery datepicker input to age.

score 1 · Answer 3 · answered Aug 24 '15 at 13:11

If you are using momentjs. Then you can create filter simply by using this snippet

var now  = "04/09/2013 15:00:00";
var then = "04/09/2013 14:20:30";

moment.utc(moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss")

score 1 · Answer 4 · answered Feb 15 '17 at 00:11

Idk why I can never reply to people, says I need more rep but to rep I need to comment.. whatever.

In response to @Dean Christian Armada's, I kept getting an error regarding the filter. But changing to the following seems to work fine so I do appreciate it!

$scope.getAge = function(birthday){
    var birthday = new Date(birthday);
    var today = new Date();
    var age = ((today - birthday) / (31557600000));
    var age = Math.floor( age );
    return age;
  }

And for the HMTL

{{ getAge(birthdate) }}

Convert birthday to age in angularjs

4 Answers4

Linked