Angular and date from PHP InvalidPipeArgument: ‘Unable to convert “[object Object]” into a date’ for pipe ‘DatePipe’

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

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'}}