带角度的日期管道没有像宣传的那样工作答案

【问题标题】：Date pipe with angular not working as advertised带角度的日期管道没有像宣传的那样工作
【发布时间】：2018-07-10 00:31:43
【问题描述】：

角度的日期管道应该像文档中所说的那样工作：https://angular.io/api/common/DatePipe。但是，当我运行 Today's date is {{myDate| date:'fullDate'}} 时，它正在打印今天的日期是 2018 年 1 月 30 日。就是这样，没有时间，没有时区。有没有人经历过这种情况并找到了一种让它按预期方式工作的方法？

编辑：无论我设置什么日期，它都会打印相同的日期。

日期是这样设置的

getDate(date: string) {
    //date = '2018-01-30T00:02:14.637Z';
    return new Date(date);
}

我已经尝试过这种方式并直接在模板中使用该字符串，结果是相同的 M/D/YYYY

【问题讨论】：

myDate 是如何定义和设置的？
@DeborahK 这是一个日期对象。它来自 new Date() 并传入了一个 iso 日期字符串。
看看你是否可以在堆栈闪电战中重现它。
你需要full ...而不是fulldate
@matmo nope 在 stackblitz 上不可重现。何时添加日期管道我使用 angular 2.4

标签： angular

【解决方案1】：

你可以只用这个

date:'medium'

【讨论】：

【解决方案2】：

TL;DR - 如果您使用的是 Angular v5 或更高版本，请使用 date:'full' - 如果您使用的是较低版本，请构建您自己的日期字符串

https://angular.io/api/common/DatePipe 上的文档是基于我猜的当前版本。我目前正在使用@angular/common 4.2.4 并查看了 date_pipe.d.ts。

缺少“long”、“full”、“longTime”和“fullTime”格式。

因此，如果您不想更新到 Angular 5，您仍然可以通过组合选择器来“重建它们”：

*  | Component | Symbol | Narrow | Short Form   | Long Form         | Numeric   | 2-digit   |
*  |-----------|:------:|--------|--------------|-------------------|-----------|-----------|
*  | era       |   G    | G (A)  | GGG (AD)     | GGGG (Anno Domini)| -         | -         |
*  | year      |   y    | -      | -            | -                 | y (2015)  | yy (15)   |
*  | month     |   M    | L (S)  | MMM (Sep)    | MMMM (September)  | M (9)     | MM (09)   |
*  | day       |   d    | -      | -            | -                 | d (3)     | dd (03)   |
*  | weekday   |   E    | E (S)  | EEE (Sun)    | EEEE (Sunday)     | -         | -         |
*  | hour      |   j    | -      | -            | -                 | j (1 PM)  | jj (1 PM) |
*  | hour12    |   h    | -      | -            | -                 | h (1)     | hh (01)   |
*  | hour24    |   H    | -      | -            | -                 | H (13)    | HH (13)   |
*  | minute    |   m    | -      | -            | -                 | m (5)     | mm (05)   |
*  | second    |   s    | -      | -            | -                 | s (9)     | ss (09)   |
*  | timezone  |   z    | -      | -            | z (Pacific Standard Time)| -  | -         |
*  | timezone  |   Z    | -      | Z (GMT-8:00) | -                 | -         | -         |
*  | timezone  |   a    | -      | a (PM)       | -                 | -         | -         |

就我而言，我使用了

{{ dateString | date:''EEEE, MMMM dd, y, hh:mm:ss Z'}}

输出：“2018 年 4 月 9 日，星期一，03:42:00 GMT+2” .

【讨论】：

不错的 TL；DR，但你应该把它放在@开头，否则它会变成 TL；已经读过 ;-)
我将它移到顶部，感谢您阅读所有内容以找到 tl;dr ;)

【解决方案3】：

我刚试过这个，full 提供了完整的日期。 fulldate 只提供日期，不提供带时间和时区的日期。

我的 HTML

  <div class='panel-heading'>
    {{pageTitle}} today: {{ today | date: 'full'}}
  </div>

在我的组件中

today: Date = new Date(Date.now());

结果是这样的：

请注意，日期以完整格式显示。（忽略我放在哪里...我只是在使用我的一个示例应用程序。）

【讨论】：

是的，基本上没有管道工作。因此，即使 full 它打印为 M/D/YYYY 这仍然不是 full 应该做的。
如果你没有看到这个......我猜你在组件中设置日期的方式有问题。你能把那个代码也贴一下吗？
日期管道从一开始就存在......但我似乎记得它最初并不支持所有传入的日期格式。尝试将值作为字符串而不是日期对象传递，看看是否有帮助。
字符串和日期对象的结果相同。
这里有一个关于这个的讨论：github.com/angular/angular/issues/3261 和这里：github.com/angular/angular/pull/7794 但是这些都是在 v2 之前的 rc 中修复的。