无法在iOS/Safari中使用ionic2/angular2正确显示日期时间

Question

嗨，我在这里面临一个奇怪的问题，我正在获取动态数据，因为我还获取了日期和时间，并且我使用 chrome/android 中的日期管道在 html 中显示它，它运行良好，但是当我检查 ios/Safari 时，它显示了时差

下面是我正在使用的 json 数据

FromCurrentDate: "2018-01-05T00:00:00"

FromPreviousDate: "2018-01-04T00:00:00"


ToCurrentDate: "2018-01-05T14:00:53.137"

ToPreviousDate: "2018-01-04T14:00:53.137"

我像这样显示日期 在 chrome/android 中它显示如下

在 Ios/safari 中显示如下 在模板中我使用下面的代码

Currrent {{singleTable[0].FromCurrentDate|date: 'dd/MM/yyyy,h:mm:ss a'}} to {{singleTable[0].ToCurrentDate|date: 'dd/MM/yyyy,h:mm:ss a'}}

如何解决这个时差问题？

Answer 1

您面临的问题是由

Intl

api 引起的，因为 Angular 2 版本的

DatePipe

仅适用于具有自定义格式字符串的 FireFox 和 Chrome。 由于缺少 Intl，它无法在 Safari 上运行。因此，临时解决方法是包含 Intl polyfill

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

解决方案2 您可以使用 moment.js 来格式化您所需的日期，如下所示

moment(singleTable[0].FromCurrentDate).format("dd/MM/yyyy,h:mm:ss a")

更新1

在最新的 Angular 中，他们删除了 Intl api ，为此您需要更新到 Angular 5 ，reference

更新2 这是一个使用 MomentJs 的 Angular 风格的 plunker，我添加了你的日期格式，但没有在 chrome 中测试 Safari 中进行测试，

Answer 2

在 ios/mac 中，日期过滤器不起作用，因此请使用 moment.js。

我尝试了很多东西，但我能够在 moment.js 中做得最好

喜欢：我创建了一个管道

<span>{{ActionDate | dateTimeFormatFilter : "MMM DD, YYYY"}}</span>

@Pipe({name: "dateTimeFormatFilter"})
@Injectable()
export class DateTimeFormatPipe implements PipeTransform {
transform(date: any, format: string): any {
        if (date) {
         return moment(date).format(format);
        }
    }
}

Answer 3

我在桌面上的 safari 和 iPhone 上的 safari/chrome 上遇到了同样的问题。 当日期对象用作值时，它适用于 safari 或大多数浏览器。 (日期管道)

我通过添加自定义管道将日期时间字符串转换为日期对象解决了同样的问题，然后日期管道按预期工作。

组件

someDate1 = "2019-09-01 12:02:14";
someDate2 = "2019-09-01";
someDate3 = "2019-09-01 00:00:00";

模板

{{ someDate1 | toDateObj | date:'MM-dd-yyyy h:mm a' }}

这是我添加的

toDateObj

自定义管道。

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

@Pipe({
  name: 'toDateObj'
})

export class ToDateObjPipe implements PipeTransform {

    transform(value: any): any {
        if (value) {
            if (value.toString().indexOf(' ') === -1) {
                value = value + ' 00:00:00';
            }
            const temp = value.toString().replace(' ', 'T');
            return new Date(temp);
        } else {
            return null;
        }
    }

}

Answer 4

对我来说，这适用于 Safari 和 Chrome：

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


@Pipe({
  name: 'customDate'
})

export class DatePipe implements PipeTransform {
  transform(value: string): string {

      let dd = value.substr(8, 2);
      let MM = value.substr(5, 2);
      let yyyy = value.substr(0, 4);
      let date = `${dd}.${MM}.${yyyy}`;

      return `${date}`;
  }
}

当 chrome 正常时，我在 Safari 上渲染视图时遇到了错误。后来调试后发现管道 |日期是一个问题。所以我定制了一款。所有答案都很好，但导入时刻库似乎是一个大文件恕我直言。 只需导出此类，创建一个模块并在那里声明它（也导出它）并用作示例：{{_question.created_at | toDateObj: 'dd.MM.yyyy'}}

希望对某人有帮助

Answer 5

您需要接收格式为“yyyy-MM-ddTHH:mm”的日期，它将适用于所有设备和浏览器