Date/time short format display in Safari

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)

[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.

[KrisHaney]

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