如何使用Angular 4日期管道处理时区问题？


How can I deal with the timezone issue with the Angular 4 date pipe?

我在每个对象中都有一个日期值，可以像这样打印：

1
<td> {{competition.compStart }}</td>

这是它的外观：

1
1931-05-31T00:00:00.000+0000

为了更改格式以使其更具可读性，我使用了Angular日期管道：

1
<td> {{competition.compStart | date :"dd/MM/yyyy"}}</td>

结果如下：

1
30/05/1931

如您所见，它将显示前一天(5月30日而不是5月31日)。

据我了解，问题与时区有关，因为我在阿根廷，而且我们有GMT-3，那么31日的00:00减去3小时将是5月30日晚上9点。

因此，如何才能使它真正地花费时间，而不是根据时区进行处理，而仍然在管道中应用格式？

相关讨论

在后台，DatePipe使用语言环境在用户的时区中显示日期。尝试使用客户的时区数据：

1931-05-31T00:00:00.000-0300而不是1931-05-31T00:00:00.000+0000。

您可以使用(new Date()).getTimezoneOffset()在几分钟内获得客户的偏移量

这实际上是DatePipe的已知问题/局限性。社区意识到这一点。将来，您将可以指定时区作为参数({{ value | date:format:zone }})之一。

这是github上的问题：https://github.com/angular/angular/issues/9324

对于更高级的日期操作，我建议使用moment.js(更少的头痛，更好的一致性，更少的测试，更简单的维护)。

编辑：已添加：

date_expression | date[:format[:timezone[:locale]]]

代码：https://github.com/angular/angular/blob/5.0.4/packages/common/src/pipes/date_pipe.ts#L137
文件：https：//angular.io/api/common/DatePipe

相关讨论

对于角度5以上，您可以尝试在管道中添加时区，

默认情况下，它采用用户计算机的本地时区

并且您可以在几分钟内指定它，例如GMT-2，时区："-120"

1
{{ competition.compStart | date: 'short' : '-120'}}
相关讨论

我也面临同样的问题。
在保存数据之前，将日期格式转换为服务中使用的日期格式。例如，在我的Java中，它是'YYYY-MM-DD'。因此在保存所有数据之前使用角度格式：
生日已绑定到您的模板字段或仅显示在其中。

this.birthdate = this.datePipe.transform(birthDate，'yyyy-MM-dd');
其中birthdate不是日期对象，而是字符串日期。

现在，当您需要在UI上显示日期时，请使用：

1
2
3
4
5
6
                let dd = (new Date(data.birthDate)).getUTCDate().toString();

                let mm = ((new Date(data.birthDate)).getMonth()).toString();
                let yy = (new Date(data.birthDate)).getFullYear().toString();

                this.birthDate = new Date(Number(yy), Number(mm), Number(dd));