如何在Angular5中将本地时间转换为协调世界时（UTC）并将UTC转换为本地时间？

Question

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

保存：LOCAL时区转换为UTC
显示：UTC转换为LOCAL时区

由于服务器可能位于其他位置，因此我认为在客户端将值转换为UTC是正确的做法。不确定是否有更好的方法来实现这一点。因此，我正在尝试在我的angular5页面中进行相同的操作。

我对moment.js不太熟悉，因此无法完全理解它的工作方式。有什么建议可以更好地在angular中完成这项工作吗？

以下是我如何实现的...

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

感谢您的帮助。

谢谢！

- Neelima Ediga

Answer 1

您可以在Angular中使用moment模块。

import * as moment from "moment";

从本地时间到协调世界时（UTC）：

moment(local_date).toDate();

从UTC时间转换为本地时间：

moment.utc(utc_date).toDate()

- Manoj De Mel

Answer 2

不要添加/减去偏移量。那只是选择了不同的时间点。相反，只需调用.toISOString()生成基于UTC的ISO8601格式的字符串发送到服务器。你也可以将这样的字符串传递给Date对象的构造函数。所有转换为本地时间将在格式化Date对象为字符串时发生。

- Matt Johnson-Pint

---

不太确定我是否完全理解了。但是我没有将这些详细信息保存在服务器上的选项。因此，尝试在客户端处理它。谢谢 - Neelima Ediga

客户端的JavaScript Date对象会为您完成所有这些操作。您正在与它作斗争。了解更多关于Date对象及其工作原理的信息，您就会明白。 - Matt Johnson-Pint

Answer 3

一个方法是仅在用户输入时间后转换为UTC一次，然后将UTC值存储在数据库中。当您再次向客户端显示dateTime时，您可以利用Angular内置的管道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 演示： 实时演示

- Narm

---

感谢您的回复。在保存时，我能够将其转换并保存为UTC时间。但是，在显示时无法将其转换为本地时区。您介意告诉我如何使用DatePipe来解决这个问题吗？ - Neelima Ediga

当然，您能否展示一下您在模板代码中如何使用管道以及您的UTC日期是什么样子的？ - Narm

我在下面添加了代码片段，因为我无法在这里正确格式化它。再次感谢您的回复。 - Neelima Ediga

@NeelimaEdiga，我更新了我的答案。希望能有所帮助！ :) - Narm

Answer 4

在ts中

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

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

  ngOnInit() {
    this.utcDateStr = '2016-11-07T22:46:47.267';
  }
}

在HTML中

{{ utc(utcDateStr).local().format("DD/MM/YYYY HH:MM")}}

- Pavlo Kozachuk

Answer 5

这是 HTML 控制元件。

<input [(ngModel)]="configDetail.effectiveDateUtc" ng2-datetime-picker [date-format]="dateFormat" ng-value="configDetail.effectiveDateUtc"
  class="input" value="configDetail.effectiveDateUtc" name="EffectiveDateFrom" id="EffectiveDateFrom"
  [formControl]="detailForm.controls['effectiveStartDate']" />

这里是日期格式化管道..

import { Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common';

/*
 * Format the given date time
 * Usage:
 *   value | formatDateTime
 * Example:
 *   {{ 2016-11-07T22:46:47.267 | formatDateTime }}
 *   formats to: date gets formatted to 11/07/2016 22:46:47
*/
@Pipe({ name: 'formatDateTime' })
export class FormatDateTimePipe implements PipeTransform {
    constructor(private datePipe: DatePipe) {}
    transform(updatedDate: string): string {
        const format = 'MM/dd/yy h:mm:ss a';
        const MIN_VALUE = new Date(0);
        const dt: Date = new Date(updatedDate);
        if (dt <= MIN_VALUE) {
            return '';
        }
        const result = this.datePipe.transform(dt, format);
        return result;
    }
}

在控件上应用管道没有成功。对于网格控件，我可以写成 "{{ dataItem.CreatedDate | formatDateTime }}"，但是对于输入控件不确定。

所以，现在我编写了一些JavaScript方法来执行我的功能。然而，我更喜欢使用管道。

再次感谢！

- Neelima Ediga