CODEWITHSUNDEEP
javascriptangularjsmomentjstime-format
Alexandre Nascimento
Alexandre Nascimento

Reputation: 183

How format a time in hours greater than 24 hours AngularJS

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

Upvotes: 1

Views: 6846

Answers (4)

VincenzoC
VincenzoC

Reputation: 31482

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.

Upvotes: 7

Komal
Komal

Reputation: 304

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

Upvotes: 1

mehulmpt
mehulmpt

Reputation: 16567

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

Upvotes: 1

Ben
Ben

Reputation: 2706

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.

Upvotes: 1

Related Questions