Angular 由于时区原因，4 日期管道显示错误的日期 - 如何解决这个问题？

Question

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

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

这是它的样子：

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

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

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

结果为：

30/05/1931

如您所见，它显示的是前一天（5 月 30 日而不是 5 月 31 日）。

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

那么我怎样才能让它按字面意思而不是基于时区处理它，但仍然在管道中应用格式？

Answer 1

在幕后，DatePipe 使用区域设置以用户时区显示日期。尝试使用 客户的 时区数据：

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

您可以使用 (new Date()).getTimezoneOffset()

在几分钟内获得客户的偏移量

这其实就是DatePipe已知的issue/limitation。社区知道这一点。将来，您将能够将时区指定为参数之一 ({{ 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

Answer 2

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

默认使用用户机器的本地时区

您可以以分钟为单位指定时间，例如 GMT-2，时区：'-120'

{{ competition.compStart | date: 'short' : '-120'}}

Answer 3

我也遇到了同样的问题。在保存数据之前，将日期格式转换为 service.For 示例中使用的日期格式，在我的 Java 示例中，它是 'YYYY-MM-DD'。所以在 angular 中，就在保存所有数据之前：其中生日绑定到您的模板字段或只是显示。

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

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

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

Answer 4

我在我的项目中使用日期 pipe 和 offset，如下所示。

我为谁分忧

在组件中

this.offset = new Date().getTimezoneOffset();

在HTML文件中

<div>{{deviceInfo?.updatedAt | date: 'dd/MM/yyyy hh:mm:ss' : 'offset'}}</div>

Answer 5

在html文件中，如下：

{{ value | date:'yyyy-MM-dd hh:mm:ss a':'UTC'+ offset}}

在ts文件中添加以下内容，

offset:number;
this.offset = (new Date().getTimezoneOffset());

可用于将 UTC 时间转换为系统时间（本地）

Angular 由于时区原因，4 日期管道显示错误的日期 - 如何解决这个问题？

Angular 4 date pipe displays wrong date because of time zones - how to fix this?

date-pipe

angular