How format a time in hours greater than 24 hours AngularJS

Question

I have a decimal value in minutes with the value 3361 and need to convert in hours and present in this format: 56:01:00

I tried this code:

$scope.myTime = new Date(1970, 0, 1).setMinutes(3361);

<input type="text" class="form-control" ng-model="myTime | date:'HH:mm:ss'">

But the result is not that I expected: 08:01:00

You can use MomentJS for this: momentjs.com/docs/#/durations — user27414
– user27414, Commented Mar 23, 2017 at 17:48
your regular date ain't gonna work because the OP wants hours > 24. — mehulmpt
– mehulmpt, Commented Mar 23, 2017 at 17:54
There are only 24 hours in a day. 56:01:00 is not time at all. It's an amount of hours, minutes and seconds delimited with colon. Converting it to 08:01:00 time is the expected behaviour. If you don't need it to be time, parse and process it by hand, depending on your needs. — Estus Flask
– Estus Flask, Commented Mar 23, 2017 at 18:49

VincenzoC · Accepted Answer · 2017-10-18 20:12:38Z

7

I fear that you can't acheive what you need using angular date filter.

You can create you custom filter (here angular official guide) and build the result in the format you need.

For example, you can create a moment duration using moment.duration(3361, 'minutes'); and then use moment-duration-format to get the duration in the HH:mm:ss format.

Here a full live example:

angular.module('MyApp', [])
.filter('durationFormat', function() {
  return function(input) {
    input = input || '';
    var out = '';
    var dur = moment.duration(input, 'minutes');
    return dur.format('HH:mm:ss');
  };
})
.controller('AppCtrl', function($scope) {
  $scope.myTime = 3361;
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  {{ myTime | durationFormat }}
</div>

Another way to get the same output is using angular-moment-duration-format that has filters to use and display moment duration. You can create your duration using amdCreate specifying 'minutes' unit and then format it using amdFormat.

Here an example:

angular.module('MyApp', ['angularDurationFormat'])
.controller('AppCtrl', function($scope) {
  $scope.myTime = 3361;
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<script src="https://cdn.rawgit.com/vin-car/angular-moment-duration-format/0.1.0/angular-moment-duration-format.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  {{ myTime | amdCreate:'minutes' | amdFormat:'HH:mm:ss' }}
</div>

PS. I'm the creator of angular-moment-duration-format.

edited Oct 18, 2017 at 20:12

answered Mar 23, 2017 at 19:32

VincenzoC

31.7k12 gold badges102 silver badges123 bronze badges

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

2 Comments

soumitra goswami Over a year ago

hi, how do I make sure,that the time is always displayed in HH:mm:ss format? right now, after adding your changes, its showing ss for time in seconds(instead of 00:00:ss), for minutes it shows mm:ss (instead of 00:mm:ss)and so on

soumitra goswami Over a year ago

i looked into the moment js library and figured it out , just had to pass the settings obj arg with trim:false like - amdFormat:'HH:mm:ss':0:{trim:false} and it works as expected

Ben · Accepted Answer · 2017-03-23 17:50:02Z

1

There are no built-in AngularJS date/time filters that will accomplish what you're trying to display.

You can however create a custom AngularJS filter which will achieve what you're looking for.

answered Mar 23, 2017 at 17:50

Ben

2,7261 gold badge15 silver badges16 bronze badges

Comments

mehulmpt · Accepted Answer · 2017-03-23 17:53:16Z

1

% 60 will give you minutes spared. Then you can simply subtract and divide it by 60 to get number of hours.

function minutesToHours(min) {
   var minutes = min % 60;
   var hours = (min-minutes)/60;
   minutes = minutes < 10 ? '0' + minutes : minutes;
   return hours+':'+minutes+':00';
}

console.log(minutesToHours(3361));

answered Mar 23, 2017 at 17:53

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Comments

Komal · Accepted Answer · 2017-03-23 17:53:42Z

1

Try changing your scope with below also add $filter in your controller

$scope.myTime = $filter('date')(new Date(1970, 0, 1).setMinutes(3361), 'HH:mm:ss');

answered Mar 23, 2017 at 17:53

Komal

3041 silver badge7 bronze badges

Collectives™ on Stack Overflow

How format a time in hours greater than 24 hours AngularJS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related