如何格式化大于 24 小时的时间 AngularJS

Question

我有一个以分钟为单位的十进制值，值为 3361，需要以小时为单位转换并以这种格式显示：56:01:00

我试过这段代码：

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

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

但结果不是我预期的：08:01:00

Answer 1

没有内置的 AngularJS date/time 过滤器可以完成您要显示的内容。

不过，您可以创建一个 custom AngularJS filter 来实现您的需求。

Answer 2

% 60 会让你节省几分钟。然后你可以简单地减去它并除以 60 得到小时数。

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

Answer 3

尝试使用以下方法更改您的范围，同时在您的控制器中添加 $filter

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

Answer 4

我担心您无法使用 angular date 过滤器实现您的需求。

您可以创建自定义过滤器（此处 angular official guide）并以您需要的格式构建结果。

例如，您可以创建一个 moment duration using moment.duration(3361, 'minutes'); and then use moment-duration-format 以获取 HH:mm:ss 格式的持续时间。

这里有一个完整的实例：

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>

获得相同输出的另一种方法是使用 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.

举个例子：

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。我是 angular-moment-duration-format.

的创建者

如何格式化大于 24 小时的时间 AngularJS

How format a time in hours greater than 24 hours AngularJS

javascript

time-format

angularjs

momentjs