如何在 Angular5 中将本地转换为 UTC 以及将 UTC 转换为本地？

Question

我的页面上有一个 DateTimePicker，用户可以在其中选择本地时区的日期时间。但是当我们将其保存在数据库中时，我需要将其转换为 UTC 并保存。同样，在向用户显示此内容时，我再次需要从 UTC 转换为用户的本地时区。

保存：本地时区转换为 UTC
显示：UTC 转换为本地时区

由于服务器可能驻留在其他位置，我认为在客户端本身将值转换为 UTC 是正确的。不确定是否有更好的方法来做到这一点。所以，我在我的 angular5 页面中尝试做同样的事情。

对 moment.js 不太熟悉，因此无法完全理解它的实际工作原理。有什么技巧可以在角度上以更好的方式做到这一点吗？

下面是我如何实现的..

convertUtcToLocalString(val : Date) : string {        
    var d = new Date(val); // val is in UTC
    var localOffset = d.getTimezoneOffset() * 60000;
    var localTime = d.getTime() - localOffset;

    d.setTime(localTime);
    return this.formatDate(d);
}

convertUtcToLocalDate(val : Date) : Date {        
    var d = new Date(val); // val is in UTC
    var localOffset = d.getTimezoneOffset() * 60000;
    var localTime = d.getTime() - localOffset;

    d.setTime(localTime);
    return d;
}

convertLocalToUtc(val : Date) : Date { 
    var d = new Date(val);
    var localOffset = d.getTimezoneOffset() * 60000;
    var utcTime = d.getTime() + localOffset;

    d.setTime(utcTime);
    return d;
}

感谢你的帮助。

谢谢！

Answer 1

您可以在角度中使用力矩模块。

import * as moment from "moment";

从本地到 UTC：

moment(local_date).toDate();

从 UTC 到本地：

moment.utc(utc_date).toDate()

Answer 2

一种方法是在用户输入时间后仅转换为 UTC 一次。然后将 UTC 值存储在数据库中。当您想要再次向客户端显示日期时间时，您可以利用 Pipe 中内置的 Angulars DatePipe 来管理从 UTC 转换为所需格式的逻辑。

在您的组件中从服务器获取 UTC 日期：

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'input-overview-example',
  templateUrl: 'date-example.html',
})
export class DateExample implements OnInit {
 public utcDate;

  ngOnInit(){
    //get the UTC date from your server
    this.utcDate = new Date('2016-11-07T22:46:47.267');
  }
}

然后使用 DatePipe 将模板中的 UTC 转换为您想要的格式：

<h3>Example UTC Date pipe conversion</h3>
<div>{{utcDate| date:"MM/dd/yy"}}</div>

如果你想尝试一下我制作的 StackBlitz 演示： Live demo