Component.html:151 ERROR Error: InvalidPipeArgument: 'Unable to convert “14-05-2021” into a date' for pipe 'DatePipe'

Question

I am getting response from backend LastDate. I am binding this to my ngModel and showing in Grid, but in console I am getting this error

Here is the corresponding code

<ngx-datatable-column name="Last Date" prop="LastDate">
  <ng-template let-row="row" ngx-datatable-cell-template>
    {{row.LastDate| date: 'dd-MM-yyyy'}}
  </ng-template>
</ngx-datatable-column>

Answer 1

The date (String) "14-05-2021" would be interpreted wrongly by Javascript. It accepts date in the format "MM-DD-YYYY" whereas your input is in the format "DD-MM-YYYY". The quick fix would be to reformat the string before sending it to the date pipe.

Controller (*.ts)

backendFetch().subscribe({
  next: (res: any) => {
    const s = res.LastDate.split("-");
    this.row = {
      ...res,
      LastDate: `${s[1]}-${s[0]}-${s[2]}`;
    }
  },
  error: (error: any) => { }
);

This way the LastDate property of the row object is adjusted to be of the expected format "MM-DD-YYYY".

Obviously the transformation is trivial using Array#split. I'm sure someone else could come up with a better solution (eg. using RegEx).