Question

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

下面是我消耗的json数据

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

即时显示这样的日期和在chrome / android中，它显示为

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

public class BeaconsWorker : Java.Lang.Object, IBeaconConsumer
    {
 private string[] guids;



        private readonly Context context;
        private readonly BeaconManager beaconManager;
        private readonly RangeNotifier rangeNotifier;
        private readonly List<BeaconEntry> beacons;



        public Context ApplicationContext
        {
            get { return context.ApplicationContext; }
        }


        public BeaconsWorker(Context context, string[] guids, int scanTime)
        {
            ...
            this.context = context;         
            rangeNotifier = new RangeNotifier();
            beaconManager = BeaconManager.GetInstanceForApplication(context);
            beaconManager.SetForegroundBetweenScanPeriod(1000);
            beaconManager.SetForegroundScanPeriod(1000);
            beaconManager.SetBackgroundMode(false);
            var beaconParser = new BeaconParser();
            beaconParser.SetBeaconLayout("...");
            beaconManager.BeaconParsers.Add(beaconParser);
            rangeNotifier.DidRangeBeaconsInRegionComplete += OnBeaconsRanging;
            beaconManager.SetRangeNotifier(rangeNotifier);


        }


        public bool BindService(Intent intent, IServiceConnection serviceConnection, [GeneratedEnum] Bind flags)
        {
            return context.BindService(intent, serviceConnection, flags);
        }

        public void OnBeaconServiceConnect()
        {

            foreach (var region in beaconManager.RangedRegions.ToList())
                beaconManager.StopRangingBeaconsInRegion(region);

                    for (int i = 0; i < guids.Length; i++)
                    {
                        var uuid = Identifier.Parse(guids[i]);
                        var region = new Region("R" + i, uuid, null, null);
                        beaconManager.StartRangingBeaconsInRegion(region);
                }   

        }

        public void UnbindService(IServiceConnection serviceConnection)
        {
            context.UnbindService(serviceConnection);
        }


        public async Task<BeaconEntry> GetLocationResult()
        {

            beaconManager.Bind(this);
            await Task.Delay(scanTime * 1000);         
            beaconManager.Unbind(this);
            ...

            return result;
        }


        private void OnBeaconsRanging(object sender, RangeEventArgs e)
        {

            lock (beacons)
                foreach (var item in e.Beacons)
                {
                    var beacon = new BeaconEntry()
                    {
                        BeaconGUID = item.Id1.ToString(),
                        BeaconMajor = Int32.Parse(item.Id2.ToString()),
                        BeaconMinor = Int32.Parse(item.Id3.ToString())
                    };

                    beacons.Add(beacon);
                }  
        }


        private class RangeEventArgs : EventArgs
        {
            public Region Region { get; set; }

            public ICollection<Beacon> Beacons { get; set; }
        }

        private class RangeNotifier : Java.Lang.Object, IRangeNotifier
        {
            public event EventHandler<RangeEventArgs> DidRangeBeaconsInRegionComplete;

            public void DidRangeBeaconsInRegion(ICollection<Beacon> beacons, Region region)
            {

                OnDidRangeBeaconsInRegion(beacons, region);
            }

            private void OnDidRangeBeaconsInRegion(ICollection<Beacon> beacons, Region region)
            {                
                DidRangeBeaconsInRegionComplete?.Invoke(this, new RangeEventArgs { Beacons = beacons, Region = region });
            }
        }

我该如何解决这个时差问题？

Answer 1

您遇到的问题是由Intl api引起的，因为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>

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

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

更新1

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

更新2 这是plunker使用角度味道的MomentJs，我添加了你的日期格式，但没有在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中遇到了相同的问题。当使用date对象作为值时，它可用于Safari或几乎所有浏览器。（DatePipe）

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

组件

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

希望它对某人有帮助

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

4 个答案: