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

【问题标题】：How format a time in hours greater than 24 hours AngularJS如何格式化大于 24 小时 AngularJS 的时间
【发布时间】：2017-08-16 10:20:25
【问题描述】：

我有一个以分钟为单位的十进制值，其值为 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

【问题讨论】：

您可以为此使用 MomentJS：momentjs.com/docs/#/durations
你的常规约会是行不通的，因为 OP 想要小时 > 24。
是的，这是我需要提示使用时间的问题> 24
@JonB 有这样的例子吗？
一天只有24小时。 56:01:00 根本不是时间。它是用冒号分隔的小时、分钟和秒数。将其转换为 08:01:00 time 是预期的行为。如果您不需要它是时间，则根据您的需要手动解析和处理它。

标签： javascript angularjs momentjs time-format

【解决方案1】：

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

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

例如，您可以使用moment.duration(3361, 'minutes'); 创建moment duration，然后使用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，它有过滤器可供使用并显示时刻持续时间。您可以使用amdCreate 指定'minutes' 单位来创建持续时间，然后使用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的创建者。

【讨论】：

嗨，我如何确保时间始终以 HH:mm:ss 格式显示？现在，在添加更改后，它以秒为单位显示 ss（而不是 00:00:ss），分钟显示 mm:ss（而不是 00:mm:ss）等等
我查看了那一刻 js 库并想通了，只需要使用 trim:false 传递设置 obj arg - amdFormat:'HH:mm:ss':0:{trim:false } 并且它按预期工作

【解决方案2】：

尝试更改您的范围，并在您的控制器中添加 $filter

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

没有内置的 AngularJS 日期/时间过滤器可以完成您想要显示的内容。

但是，您可以创建一个 custom AngularJS filter 来实现您所寻找的。p>

【讨论】：