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

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

• javascript
• angularjs
• momentjs
• time-format

• 2 You can use MomentJS for this: momentjs./docs/#/durations – user27414 Commented Mar 23, 2017 at 17:48
• your regular date ain't gonna work because the OP wants hours > 24. – mehulmpt Commented Mar 23, 2017 at 17:54
• Yes, this is the problem I need a hint to use the time> 24 – Alexandre Nascimento Commented Mar 23, 2017 at 18:01
• @JonB have an example of this? – Alexandre Nascimento Commented Mar 23, 2017 at 18:13
• 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 Commented Mar 23, 2017 at 18:49

4 Answers 4

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./ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./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./ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<script src="https://cdn.rawgit./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.

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

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

% 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));

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');