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

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/42983219/how-format-a-time-in-hours-greater-than-24-hours-angularjs

标签

javascript

angularjs

momentjs

time-format