Angular and date from PHP InvalidPipeArgument: 'Unable to convert "[object Object]" into a date' for pipe 'DatePipe'

Question

I have application written in Angular 9 and api written in PHP. From controller in PHP I return list of objects with property finishDate. In PHP finishDate is assign to DateTime:

$timeSheetsOrderDTO1 = new TimeSheetsOrderDTO;
$timeSheetsOrderDTO1->orderId = 62131;
$timeSheetsOrderDTO1->finishDate = new DateTime();
$timeSheetsOrderDTO1->count = 8;

TimeSheetsOrderDTO in TypeScript:

export class TimeSheetsOrderDTO {
  public orderId: number;
  public finishDate: Date;
  public count: number;
}

In TypeScript (Angular) I see data from controller as below:

this.timesheetsOrders: Array(4)
0:
count: 8
finishDate: {date: "2020-12-26 15:49:15.052904", timezone_type: 3, timezone: "UTC"}
orderId: 62131

I want to display finishDate in html. When I have code like this:

{{ timesheetsOrder.finishDate }}

I see:

When I write like that:

{{ timesheetsOrder.finishDate | date : 'yyyy-MM-dd'}} 

I get error:

core.js:6241 ERROR Error: InvalidPipeArgument: 'Unable to convert "[object Object]" into a date' for pipe 'DatePipe'

Answer 1

In your attempt, timesheetsOrder.finishDate refers to the entire object and not the date property within it which is why you get an error.

Use the following syntax:

{{ timesheetsOrder.finishDate.date | date : 'yyyy-MM-dd'}}