显示日期时间，如 1 小时前、5 小时前 - Angularjs答案

【问题标题】：Display datetime like 1 hour ago, 5 hours ago - Angularjs显示日期时间，如 1 小时前、5 小时前 - Angularjs
【发布时间】：2015-07-08 09:00:56
【问题描述】：

我在我的控制面板上显示上次登录时间。如何像这样显示日期时间：

1 hour ago, 
5 hours ago

【问题讨论】：

这里有一些基于 javascript 的答案：1) stackoverflow.com/questions/7641791/… 2) stackoverflow.com/questions/6108819/…
请附上您的代码
看看Moment.js

标签： angularjs

【解决方案1】：

Moment.js 绝对是实现此目的的好方法。我已经为你设置了一个 Plunkr，它展示了一个关于如何做到这一点的基本示例。

http://plnkr.co/edit/64mfpDhUxdXcQo6r8Xrf?p=preview

总而言之，您可以使用.fromNow() 方法来显示您的日期和当前时间之间的差异：

$scope.difference = moment($scope.yourDate).fromNow();

如果 $scope.yourDate 来自 1 小时前，$scope.difference 将设置为 an hour ago。

编辑

根据您的评论，我已更新 Plunker 以使用您提供的日期。

$scope.yourDate = new Date('2015-07-08T14:02:42.973');
$scope.difference = moment($scope.yourDate).fromNow();

在撰写本文时，这会将 $scope.difference 设置为 20 hours ago。

【讨论】：

嗨@uikrosoft。我已更新我的答案以使用此日期。

【解决方案2】：

您可以使用angular-timeago 来实现这一点。

安装包后，您需要按照以下说明在angular.module 中引用它。

var app = angular.module('ngApp', ['yaru22.angular-timeago']);

然后您可以使用内联管道将任何日期值转换为“之前”字符串例如

{{myDate | timeAgo}}

【讨论】：

【解决方案3】：

为了实现这一点，这里有一个简单的包ngx-pretty-date，它提供了一个简单的日期管道。

安装软件包后，只需将其导入您的app.modules.ts

import { NgxPrettyDateModule } from 'ngx-pretty-date';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxPrettyDateModule
  ],
  bootstrap: [...]
})
export class AppModule { }

然后在你的组件中使用它

<span> {{dateObj | prettyDate}} </span>

【讨论】：