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

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

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

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

不太熟悉时刻.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;
}

感谢您的帮助。

谢谢！

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

import * as moment from "moment";

从本地到 UTC：

moment(local_date).toDate();

从 UTC 到本地：

moment.utc(utc_date).toDate()

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

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

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

在网页中

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

这是 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/核心"导入 { 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 |格式日期时间 }}"，但不确定输入控件。

所以，现在我已经编写了一些javascript方法来执行我的功能。但是，更愿意使用管道。

再次感谢！！

相关内容

最新更新

热门标签：