AngularJS custom filter not working on iOS and IE

Question

I have created the following filter to convert MySQL dates and adjust time for the timezone relatively to 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();
        };
    });

Then, I use the filter to convert dates to my preferred format and show them inside HTML as follows. (I have changed the Angular interpolation tags to [[ ]] to avoid conflicts with Laravel's blade syntax {{ }})

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

This works fine with all the desktop browsers except for IE. Also this do not work for browsers in iOS(Safari/Chrome).

Working on desktop browsers except IE

Not working on iOS browsers and IE. The raw angular code is shown instead.

Important:

When I was searching, I found that the problem with IE was solved in Angular v1.3.3 and above. But I'm using v1.5.5 and still the problem is there. There was no clue on the Internet about this situation on iOS browsers. Can anyone explain why this happen and how to solve this?

Thanks in advance!

What does the browser log into the console in the dev tools? — sibbl, Jul 21 '16 at 06:29
`RangeError: Number expected` inside the anonymous function in filter mentioned above, near `return date.toISOString();` — Imesha Sudasingha, Jul 21 '16 at 06:46
According to MSDN: "If objDate does not contain a valid date, a RangeError exception is thrown [when calling toISOString()].". Maybe you can inspect the values of offset, date.getTime() and the whole value which you pass to the setTime function? — sibbl, Jul 21 '16 at 06:56
That is impossible. value is valid. Then how does it work well on chrome? Same page works flawless on Chrome on desktops. Problems comes with IE and iOS browsers. I just read that IE do not support the toISOString() method in earlier versions. May be that's the cause. — Imesha Sudasingha, Jul 21 '16 at 06:59

score 4 · Accepted Answer · edited May 23 '17 at 12:17

I finally found the cause to the problem. I had used var date = new Date(input); where input is in the format Y-m-d H:i:s which is a MySQL timestamp.

JavaScript use Date.parse when creating a Date object from a timestamp. In desktop versions of many browsers, they accept MySQL timestamps to create Date objects. But in iOS and IE, this doesn't work. For date to be created using a string, the timestamp should be in the ISO format. Therefore, it do not accept MySQL timestamps.

To solve this, I referred this question where the timestamp was split and then used to create the date object.

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

AngularJS custom filter not working on iOS and IE

1 Answers1