19

I've a requirement where I want to convert milliseconds to xHours and yMins in AngularJS.

For ex. 3600000 should be displayed as 1h 0m.

I tried using date:'H:m' and date:'HH:mm' from the date formats on Angular's website.

But those give 19:0 and 19:00 instead of 1h 0m.

Any pointers of achieving this will be helpful.

Thanks

1
  • 3
    you can write a custom filter. date is not for displaying time intervals.
    – akonsu
    Commented Nov 25, 2013 at 14:58

9 Answers 9

31

Let make a custom filter for this, e.g:

.filter('millSecondsToTimeString', function() {
  return function(millseconds) {
    var oneSecond = 1000;
    var oneMinute = oneSecond * 60;
    var oneHour = oneMinute * 60;
    var oneDay = oneHour * 24;

    var seconds = Math.floor((millseconds % oneMinute) / oneSecond);
    var minutes = Math.floor((millseconds % oneHour) / oneMinute);
    var hours = Math.floor((millseconds % oneDay) / oneHour);
    var days = Math.floor(millseconds / oneDay);

    var timeString = '';
    if (days !== 0) {
        timeString += (days !== 1) ? (days + ' days ') : (days + ' day ');
    }
    if (hours !== 0) {
        timeString += (hours !== 1) ? (hours + ' hours ') : (hours + ' hour ');
    }
    if (minutes !== 0) {
        timeString += (minutes !== 1) ? (minutes + ' minutes ') : (minutes + ' minute ');
    }
    if (seconds !== 0 || millseconds < 1000) {
        timeString += (seconds !== 1) ? (seconds + ' seconds ') : (seconds + ' second ');
    }

    return timeString;
};
});

Then use it:

<div>{{ millSeconds | millSecondsToTimeString }}</div>
11

There is date converter in AngularJS, just set required date format:

{{milliseconds | date:'yyyy-MM-dd HH:mm'}}

Also I created such 'timeAgo' filter using jQuery timeago() function:

.filter('timeAgo', function() {
    return function(input) {
        if (input == null) return "";
        return jQuery.timeago(input);
    };
})

Usage:

{{milliseconds | timeAgo}}

or use together both format for wide date representation:

<span>{{milliseconds | timeAgo}}, {{milliseconds  | date:'yyyy-MM-dd HH:mm'}}</span>

Result:

12 minutes ago, 2015-03-04 11:38
10

You'll want to use moment's duration objects.

To do what you want, try this:

app.controller 'MainCtrl', ($scope) ->
    $scope.name = 'World'
    $scope.milliseconds = 3600000
    $scope.duration = moment.duration($scope.milliseconds)

And the markup

<body ng-controller="MainCtrl">
  <p>Milliseconds: {{milliseconds}}</p>
  <p>Duration: {{duration.hours()}}h {{duration.minutes()}}m</p>
</body>

plunkr: http://plnkr.co/edit/2HL75Tmr4CoAy5R9smkx

5

Thanks. I've modified your filter slightly to return duration in hh:mm:ss format.

.filter('duration', function() {
    //Returns duration from milliseconds in hh:mm:ss format.
      return function(millseconds) {
        var seconds = Math.floor(millseconds / 1000);
        var h = 3600;
        var m = 60;
        var hours = Math.floor(seconds/h);
        var minutes = Math.floor( (seconds % h)/m );
        var scnds = Math.floor( (seconds % m) );
        var timeString = '';
        if(scnds < 10) scnds = "0"+scnds;
        if(hours < 10) hours = "0"+hours;
        if(minutes < 10) minutes = "0"+minutes;
        timeString = hours +":"+ minutes +":"+scnds;
        return timeString;
    }
});
0

For anyone who wants to have comma separators (e.g. '21 days, 14 hours, 7 minutes'):

'use strict';

angular.module('contests').filter('duration', function () {
    return function(milliseconds) {
        var seconds = Math.floor(milliseconds / 1000);
        var days = Math.floor(seconds / 86400);
        var hours = Math.floor((seconds % 86400) / 3600);
        var minutes = Math.floor(((seconds % 86400) % 3600) / 60);
        var dateTimeDurationString = '';
        if ((days > 0) && (hours === 0 && minutes === 0)) dateTimeDurationString += (days > 1) ? (days + ' days ') : (days + ' day ');
        if ((days > 0) && (hours > 0 || minutes > 0)) dateTimeDurationString += (days > 1) ? (days + ' days, ') : (days + ' day, ');
        if ((hours > 0) && (minutes > 0)) dateTimeDurationString += (hours > 1) ? (hours + ' hours, ') : (hours + ' hour, ');
        if ((hours > 0) && (minutes === 0)) dateTimeDurationString += (hours > 1) ? (hours + ' hours ') : (hours + ' hour ');
        if (minutes > 0) dateTimeDurationString += (minutes > 1) ? (minutes + ' minutes ') : (minutes + ' minute ');
        return dateTimeDurationString;
    };
});
0

Try this one

var app = angular.module ( 'myApp', [] ) ;
app.controller ( 'myController', function ( $scope, $filter) {
    $scope.date = $filter('date')(milliseconds, 'MM/dd/yyyy');
});
1
  • While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. Commented May 14, 2016 at 5:24
0

Use below syntax

$filter('date')(dateObj, format)

e.g.

$filter('date')(1324339200000, 'dd/MM/yyyy');
0
(function () {
    'use strict';

    angular
        .module('module_name')
        .filter('secondsToDateTime', secondsToDateTime);

    function secondsToDateTime() {
        return function(seconds) {
            return new Date(1970, 0, 1).setSeconds(seconds);
        };
    }
})();


<span>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</span>
0

For TypeScript but could be adapted for any language.

convertTimeMS(timeMS: number): string {
  const seconds = Math.floor(timeMS / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);

  let str: string = '';

  if(hours > 0) {
    str = str + hours.toString() + 'h ';
  }
  if(minutes%60 > 0) {
    str = str + Number(minutes%60).toString() + 'm ';
  }
  if(seconds%60 > 0) {
    str = str + Number(seconds%60).toString() + 's ';
  }

  return str;
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.