I'm having issues getting a date to display properly in Firefox and Safari, using a custom filter which supports day suffixs. I get the UTC date in the format:

yyyy-mm-dd hh-mm-ss

I then have a custom DateFilter, which replaces oo with a suffix, i.e. 2nd:

var suffixes = ["th", "st", "nd", "rd"];

return function(input, format) {
    input = new Date(input).getTime();
    var dtfilter = $filter('date')(input, format);
    var day = parseInt($filter('date')(input, 'dd'));
    var relevantDigits = (day < 30) ? day % 20 : day % 30;
    var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];

    return dtfilter.replace('oo', suffix);
};

This works on Chrome, I pass the following into my template, and get the expected date:

{{ date.date_utc | DateFilter:'EEEE MMMM doo yyyy' | uppercase }} = SATURDAY NOVEMBER 1ST 2014

On Firefox/Safari this is returned as:

UNDEFINED UNDEFINED NANTH 0NAN

Research from here and here suggest I need to pass the ISO time, or a timestamp into my Date object.

I seem to already be doing this via .getTime(). I've also tried .toISOString(), but this doesn't even return anything in Firefox/Safari!

Any ideas?

I'm having issues getting a date to display properly in Firefox and Safari, using a custom filter which supports day suffixs. I get the UTC date in the format:

yyyy-mm-dd hh-mm-ss

I then have a custom DateFilter, which replaces oo with a suffix, i.e. 2nd:

var suffixes = ["th", "st", "nd", "rd"];

return function(input, format) {
    input = new Date(input).getTime();
    var dtfilter = $filter('date')(input, format);
    var day = parseInt($filter('date')(input, 'dd'));
    var relevantDigits = (day < 30) ? day % 20 : day % 30;
    var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];

    return dtfilter.replace('oo', suffix);
};

This works on Chrome, I pass the following into my template, and get the expected date:

{{ date.date_utc | DateFilter:'EEEE MMMM doo yyyy' | uppercase }} = SATURDAY NOVEMBER 1ST 2014

On Firefox/Safari this is returned as:

UNDEFINED UNDEFINED NANTH 0NAN

Research from here and here suggest I need to pass the ISO time, or a timestamp into my Date object.

I seem to already be doing this via .getTime(). I've also tried .toISOString(), but this doesn't even return anything in Firefox/Safari!

Any ideas?

• javascript
• angularjs
• date

2 Answers 2

It seems Firefox/Safari doesn't parse .toISOString() into the 'correct' format...

input = input.replace(/(.+) (.+)/, "$1T$2Z");
input = new Date(input).getTime();

This now parses it into a correct ISO format, and then is successfully parsed.

If you are passing the date in this format: 2021-01-29 12:10:58 safari will throw an error.

It must be in this format: 2021-01-29T12:10:58