Angular 4:日期管道，UTC时间到本地时间:如何告诉Angular当前时区? [英] Angular 4: Date pipe, UTC Time to local time: How to tell Angular the current time zone?

问题描述

我们正在将Angular 4与以.net核心编写的MVC应用程序一起使用. 使用SignalR服务接收数据，集线器用C#编写.数据库提供了一个Datetime2(7)字段(T-SQL)，接收到的内容如下所示(对于日期字段):

We are using Angular 4 together with a MVC Application written in .net core. The data is received using a SignalR Service, the hub is written in C#. The database provides a Datetime2(7) Field (T-SQL), the content, that gets received, looks like this (for the date-field):

dueDt:"2017-10-02T08:54:00"

这是一个UTC时间.我们生活在+2时区. 现在，在CSHTML文件中，我们将如下所示显示此值:

This time is a UTC Time. We are living in a +2 time zone. Now, in the CSHTML-File, we display this value like this:

 <small>Due: {{item.dueDt | date:'dd.MM.yy HH:mm'}}</small>

显示如下内容: 27.09.17 12:43 很好，问题在于我们的时区不是+0而是+2，因此应该显示 14:43 作为时间.

which display something like: 27.09.17 12:43 which is fine, the problem is just that our timezone is not +0 but +2, so it should display 14:43 as the time.

我在某处读到了Angulars DatePipe使用客户端本地时区的情况，但这似乎没有在这里发生. (我已经用chrome，firefox和Edge尝试过了-没什么区别). 是否有人知道为什么会发生这种情况，或者我如何告诉Angular当地时区是什么? 我已经尝试过包括角矩，但它也不起作用. (如果看起来很重要，我可以详细说明，但这是一个不同的问题.)

I have read somewhere that Angulars DatePipe uses the clients local timezone, but that doesnt seem to happen here. (I have tried this with chrome, firefox and Edge - there is no difference). Does anybody have an idea, why this happens or how I can tell Angular what the local timezone is? I have tried including angular-moment but it doesnt really work either. (I can detail that, if that seems important, but it is a different issue).

推荐答案

我已经使用moment.js做过类似的事情，但是语言环境实际上是特定于每个用户配置的语言环境和日期模式:

I have done something similar using moment.js, but the Locale it's actually specific to each user configuration for Locale and date pattern:

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
import { Observable } from 'rxjs/Rx';
import { UserService } from '../security/user/user.service';

@Pipe({
    name: 'formatDate'
})
@Injectable()
export class DateTimePipe implements PipeTransform {

    constructor(private userService: UserService) {

    }

    /**
     * Asynchronous pipe, transforms a date into a formatted date.
     * The transformation is based on the 'locale' and 'pattern' properties from the current user preferences.
     * Usage: this pipe need to be followed by the'async' pipe, since it returns an Observable.
     */
    transform(value: any, showTime?: boolean): Observable<string> {
        if (value) {
            return this.userService.getPreferences()
                .map(prefs => {
                    const locale = prefs.preferences.get('locale');

                    let pattern;
                    if (showTime) {
                        pattern = prefs.preferences.get('dateTimeFormat') || 'DD/MM/YYYY HH:mm';
                    } else {
                        pattern = prefs.preferences.get('dateFormat') || 'DD/MM/YYYY';
                    }

                    moment.locale(locale);

                    let date = value instanceof Date ? value : new Date(value);
                    return moment(date).format(pattern);
                });
        }
        return Observable.of(value);
    }
}

您也可以随时更改本地

moment.locale('en_GB')

在此处查看完整选项 https://momentjs.com/

这篇关于Angular 4:日期管道，UTC时间到本地时间:如何告诉Angular当前时区?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！