DatePipe is not working in safari browser

Question

I have used the DatePipe for Date Format and it working fine except safari browser, it showing blank in safari and throwing..

InvalidPipeArgument: 'Unable to convert "2019-10-30 12:36:12" into a date' for pipe 'e'.

 <div> 
      <h4 class="view_dark_txt" *ngIf="entrydate_text">{{entrydate_text | date: Dateformates}}</h4>
 </div> ```

Dateformates is a variable which have value = 'MMM d, y'.

Answer 1

Error come from the fact you try to create a Date object from an invalid String.

Some browser are more permissive than others, which is why there is so many libraries to solve this issue.

Firefox:
new Date('2019-10-30 12:36:12')
Date Wed Oct 30 2019 12:36:12 GMT+0700

Safari:
new Date('2019-10-30 12:36:12')
Invalid Date = $2

Option 1: change your date synthax

If you control the entiere lifecycle of your data, one option is to make sure your string match the proper date format.

The standard string representation of a date time string is a simplification of the ISO 8601 calendar date extended format (see Date Time String Format section in the ECMAScript specification for more details).
For example, "2011-10-10" (date-only form), "2011-10-10T14:48:00" (date-time form), or "2011-10-10T14:48:00.000+09:00" (date-time form with milliseconds and time zone) can be passed and will be parsed.

Best option is to use new Date().toISOString() which is what all browser will to for stringify a date.

Option 2 : external library

The other one is to use a library like moment.js, which provide a very permissive parser and let you efine your own syntax. It can make your life easier, plus add lots of sweet features but extra dependancies is not always possible.

Moment is very popular, and even has as a package for angular (angular-moment)

Answer 2

First you have to convert it to toDate() before doing PIPE, so your updated code:

<div> 
    <h4 class="view_dark_txt" *ngIf="entrydate_text"> 
        {{entrydate_text.toDate() | date: Dateformates}}
    </h4>
</div>