AngularJS 自定义过滤器不适用于 iOS 和 IE

Posted 2023-02-24

【中文标题】AngularJS 自定义过滤器不适用于 iOS 和 IE

【英文标题】：AngularJS custom filter not working on iOS and IE

【发布时间】：2016-11-24 14:11:05

【问题描述】：

我创建了以下过滤器来转换 mysql 日期并调整时区相对于 UTC 的时间。

angular.module('HIS')
    .filter('dateToISO', function () 
        return function (input) 
            var offset = new Date().getTimezoneOffset();
            var date = new Date(input);
            date.setTime(date.getTime()-offset*60000);
            return date.toISOString();
        ;
    );

然后，我使用过滤器将日期转换为我喜欢的格式，并在 html 中显示它们，如下所示。 （我已将 Angular 插值标签更改为 [[ ]] 以避免与 Laravel 的刀片语法 冲突）

[[prescription.patient.first_name]] [[prescription.patient.last_name]]<br>
[[prescription.created_at | dateToISO | date:"EEEE, d/M/yy h:mm a"]]

这适用于除 IE 之外的所有桌面浏览器。这也不适用于 iOS 中的浏览器（Safari/Chrome）。

在 IE 以外的桌面浏览器上工作

不适用于 ios 浏览器和 IE。而是显示原始角度代码。

重要：

我在搜索的时候发现IE的问题在Angular v1.3.3及以上版本中解决了。但是我使用的是 v1.5.5，但问题仍然存在。对于 iOS 浏览器上的这种情况，互联网上没有任何线索。谁能解释为什么会发生这种情况以及如何解决这个问题？

提前致谢！

【问题讨论】：

开发工具中浏览器登录到控制台的内容是什么？

RangeError: Number expected 在上述过滤器中的匿名函数内，靠近return date.toISOString();

根据 MSDN：“如果 objDate 不包含有效日期，则会引发 RangeError 异常 [当调用 toISOString()]。”。也许您可以检查 offset、date.getTime() 的值以及传递给 setTime 函数的整个值？

那是不可能的。值有效。那么它如何在 chrome 上运行良好？同一页面在台式机上的 Chrome 上运行完美。问题来自 IE 和 iOS 浏览器。我刚刚读到 IE 在早期版本中不支持 toISOString() 方法。可能就是这个原因。

【参考方案1】：

我终于找到了问题的原因。我使用了var date = new Date(input);，其中输入格式为Y-m-d H:i:s，这是一个MySQL 时间戳。

从时间戳创建 Date 对象时，javascript 使用 Date.parse。在许多浏览器的桌面版本中，它们接受 MySQL 时间戳来创建 Date 对象。但在 iOS 和 IE 中，这是行不通的。要使用字符串创建日期，时间戳应采用ISO 格式。因此，它不接受 MySQL 时间戳。

为了解决这个问题，我参考了this question，其中时间戳被拆分，然后用于创建日期对象。

angular.module('HIS')
    .filter('dateToISO', function () 
        return function (input) 
            var t = input.split(/[- :]/);
            var date = new Date(Date.UTC(t[0], t[1]-1, t[2], t[3], t[4], t[5]));
            return date;
        ;
    );