如何在angular5中将本地转换为UTC和UTC到本地？

Question

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

保存：本地时区到 UTC
显示：UTC 到 LOCAL 时区

由于服务器可能位于其他位置，我认为在客户端本身将值转换为 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

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

import * as moment from "moment";

从本地到 UTC：

moment(local_date).toDate();

从 UTC 到本地：

moment.utc(utc_date).toDate()

Answer 2

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

Answer 3

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

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")}}

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']" />

这里是日期格式管道..

从 '@angular/core' 导入 { Pipe, PipeTransform }; 从“@angular/common”导入 { DatePipe }；

/*
 * 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 方法来执行我的功能。但是，更愿意使用管道。

再次感谢！！