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

时间:2022-11-12 10:23:23

Hi im facing a weird issue here im getting dynamic data in that im also getting the date and time and im displaying it in html using date pipe in chrome/android it is working good but when i check ios/Safari it is showing time difference

嗨即时通讯面临一个奇怪的问题在这里即时通讯获取动态数据即时通讯也获取日期和时间和我在html中使用日期管道在chrome / android中显示它它工作正常,但当我检查ios / Safari它显示时差

below is my json data im consuming

下面是我消耗的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"

im displaying the date like this and in chrome/android it is displaying like this无法使用ionic2 / angular2在iOS / Safari中正确显示日期时间

即时显示这样的日期,在chrome / android中,它显示如下

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

in Ios/safari it is displaying like this in the template im using the code below

在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'}}

how can i solve this time difference issue?

我怎样才能解决这个时差问题?

2 个解决方案

#1


8  

The issue you are facing is caused by the Intlapi because DatePipe for Angular 2 Release is working fine only for FireFox and Chrome with custom format strings. it Doesn't work on Safari due to lack of Intl. so as a temporary work around is to include the Intl polyfill

您面临的问题是由Intlapi引起的,因为Angular 2 Release的DatePipe仅适用于具有自定义格式字符串的FireFox和Chrome。由于缺乏Intl,它在Safari上不起作用。所以暂时的工作是包括Intl polyfill

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

Solution 2 You can use the moment.js which can format your required date as follows

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

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

Update 1

In latest angular they have removed the Intl api , and for this you need to update to the angular 5 , reference

在最新的角度,他们已经删除了Intl api,为此你需要更新到角度5,参考

Update 2 Here is a plunker using MomentJs in angular flavor, i added your date format but didn't tested in safari tested in chrome,

更新2这是一个使用角度味道的MomentJs的plunker,我添加了你的日期格式,但没有测试在chrome中测试的safari,

#2


6  

In ios/mac date filter doesn't work, so use moment.js for this.

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

I have tried lot of stuff but I was able to do best in moment.js

我已经尝试了很多东西,但我能够在最好的时刻做到最好

like: I created a pipe

喜欢:我创造了一个管道

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

#1


8  

The issue you are facing is caused by the Intlapi because DatePipe for Angular 2 Release is working fine only for FireFox and Chrome with custom format strings. it Doesn't work on Safari due to lack of Intl. so as a temporary work around is to include the Intl polyfill

您面临的问题是由Intlapi引起的,因为Angular 2 Release的DatePipe仅适用于具有自定义格式字符串的FireFox和Chrome。由于缺乏Intl,它在Safari上不起作用。所以暂时的工作是包括Intl polyfill

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

Solution 2 You can use the moment.js which can format your required date as follows

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

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

Update 1

In latest angular they have removed the Intl api , and for this you need to update to the angular 5 , reference

在最新的角度,他们已经删除了Intl api,为此你需要更新到角度5,参考

Update 2 Here is a plunker using MomentJs in angular flavor, i added your date format but didn't tested in safari tested in chrome,

更新2这是一个使用角度味道的MomentJs的plunker,我添加了你的日期格式,但没有测试在chrome中测试的safari,

#2


6  

In ios/mac date filter doesn't work, so use moment.js for this.

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

I have tried lot of stuff but I was able to do best in moment.js

我已经尝试了很多东西,但我能够在最好的时刻做到最好

like: I created a pipe

喜欢:我创造了一个管道

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