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 做了类似的事情，但是 Locale 它实际上特定于每个用户配置的 Locale 和日期模式:

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改变local

you can change local with moment as well

moment.locale('en_GB')

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

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