如何在 Angular 中使用 DatePipe 管理时区？答案

【问题标题】：How to manage timezone using DatePipe in Angular?如何在 Angular 中使用 DatePipe 管理时区？
【发布时间】：2018-12-09 01:06:50
【问题描述】：

考虑 MySQL 数据库 以 YYYY-MM-DD HH:MI 的标准 SQL TIMESTAMP 格式发送时间戳： SS

这里，2019-09-08 08:00:00

现在，我需要在我的 Angular 网站上显示它，根据网站打开的时区操作时间戳。

Angular 文档https://angular.io/api/common/DatePipe中提到的管道

{{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a zzzz'}}

确实给出了错误的输出为 2019 年 9 月 8 日星期日上午 8:00:00 GMT+05:30（因为它会自动将时区添加到提供的时间）。我需要它与将 +05:30 添加到 2019 年 9 月 8 日上午 8:00:00 时一样。此外，我不想显示 GMT+05:30。

另外，我很清楚这可以通过使用 moments.js 或只是 pure javascript 或某种 自定义管道 来解决.但是，我想知道是否有我无法弄清楚的管道滴答声。

【问题讨论】：

我认为要获得这样的自定义输出，您需要编写一个自定义管道，甚至可能只是一个函数，将值发回以与正则表达式进行比较，以删除额外的文本不想。
感谢引用帖子中的文档。向所有人展示您在来这里之前首先阅读的内容:)
“采用”的标准格式 ...不是 ISO 标准格式
@charlietfl, YYYY-MM-DD HH:MI:SS 是 MySQL 存储时间戳的格式。此外，是的，它不是 ISO 标准，因此我将其存储为 GMT 以保持一致性。
正确但更安全地以 javascript Date 熟悉的 ISO 格式发送给客户端。可能会遇到非标准格式的跨浏览器问题。是一个简单的转换服务器端

标签： javascript angular typescript pipe

【解决方案1】：

我认为您希望您的时间以 UTC 为单位，然后添加用户的时区。如果用户有GMT+05:30，则数据库中的时间2019-09-08 08:00:00 应在前端显示为September 8, 2019, 1:30:00 PM。

通过this 看来，如果没有 3rd 方库或编写杂乱的代码，您似乎无法在前端实现您想要的结果。如果您不想使用这些库，则需要调整后端以包含时区。

要删除GMT+05:30 和Sunday 部分，只需删除zzzz 和EEEE

   {{event.event_start_ts | date:'MMMM d, y, h:mm:ss a'}}

【讨论】：

@AbhijitSrivastava - 你能在问题中显示输出应该是什么吗？我不清楚为什么 Flyii 应该再读一遍这个问题。
@ConnorsFan ，我进行了编辑，提到日期管道在提供 SQL 格式的日期时会给出错误的输出。实际上，它认为时区已经添加到其中。

【解决方案2】：

所以，正如大家所建议的，我已按照以下步骤归档了需求。

第一步：设置MySQL时区存储绝对时间

SET GLOBAL time_zone = '+00:00'; 
SELECT @@global.time_zone, @@session.time_zone;

第 2 步： 将 MySQL 连接时区设置为“+00:00”。（对我来说是 npm mysql）示例响应日期格式现在是 2019-09-08T03:00:00.000Z

{
    host: "*******",
    user: "*****",
    password: "****",
    database: "****",
    timezone:"+00:00"
}

第 3 步：让 Angular 发挥它的魔力，格式不会影响值。

固定时区

{{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a zzzz':'GMT+05:30' }}

自适应时区

{{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a zzzz'}}

谢谢大家。

【讨论】：