Transloco: Date/time short format display in Safari

[KrisHaney]

Hello all,

Thanks for your great library.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When formatting with translocoDate: { dateStyle: 'short', timeStyle: 'short' }, I get different results between Chrome/Firefox/Edge and Safari. In Safari, the time is omitted.

Minimal reproduction of the problem with instructions

I've put together a stackblitz project to demonstrate, forked from your excellent example project:

https://stackblitz.com/edit/transloco-example-aiiepr?file=src%2Fapp%2Flocale%2Flocale%2Flocale.component.html

What is the motivation / use case for changing the behavior?

I'm currently developing a SPA app and need it to display consistently on Android and iOS.

Environment

Angular version: 9 (@latest)

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: v10.15.3 (locally)
- Platform: (Mac, Windows)

[itayod]

Thanks @KrisHaney the locale plugin is based on the native localization API as mentioned in the docs, therefor any differences between the browser are not this library's issue.

Having said that, you could hook in and change the date output using the Date Transformers

[KrisHaney]

Thanks for the quick response. In case you know off the top of your head, is this happening because of the lack of Safari support for Intl.RelativeTimeFormat?

[itayod]

@KrisHaney that might be it :) I don't familiar with their code. If you must support Safari you can look out for polyfills that fix that.

[KrisHaney]

@itayod Okay, I'll see what I can do. Thank you.

[tsvetan-ganev]

I encountered the same problem even in the latest versions of Safari (14.0). The solution is not to use the shorthand format style notations: 'short', 'medium', 'long' and instead explicitly set hour, minute, second, day, month etc.

For example, instead of using { dateStyle: 'short' } you should declare it as:

date | translocoDate: { hour: 'numeric', minute: 'numeric', second: 'numeric' }

If you stick to the full notation you can avoid including a polyfill.