如何从Angular中的日期中删除T字符

Question

我从 API 收到这样的日期时间：2021-03-21T22:00:00

这是我的组件.ts

 ELEMENT_DATA: ReservationList[];
 displayedColumns: string[] = ['fullName', 'brand', 'model', 'rentalStartDate', 'rentalEndDate', 'pickUpLocation', 'dropOffLocation', 'totalPrice', 'createdOn'];

  dataSource = new MatTableDataSource<ReservationList>(this.ELEMENT_DATA);

//here the data is taken from the API call
public getAll() {
  let resp = this.service.reservationList();
  resp.subscribe(report => this.dataSource.data= report as ReservationList[])
}

在 HTML 中，日期显示如下：

<ng-container matColumnDef="rentalEndDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> RentalEndDate </th>
    <td mat-cell *matCellDef="let element"> {{element.rentalEndDate}} </td>
</ng-container>

并且在表格中日期显示如下 2021-03-21T22:00:00

我想让日期显示不带 T 字符，只显示日期。

Answer 1

这里有几种方法可以做到这一点：

你可以使用String.replace():

removeT(input: string) {
  return input.replace('T', ' ');
}

<td mat-cell *matCellDef="let element"> {{ removeT(element.rentalEndDate) }}</td>

您也可以使用DatePipe 来格式化日期：

<td mat-cell *matCellDef="let element"> {{ element.rentalEndDate | date:'yyyy-MM-dd H:mm:ss' }}</td>

日期管道很不错，因为它让您可以轻松地以更易读的格式获取日期。

以下是使用这些不同方法的输出：

Date String                         "2021-03-21T22:00:00"
Date with string.replace('T', ' ')  "2021-03-21 22:00:00"
Date w/Pipe ('yyyy-MM-dd H:mm:ss')  "2021-03-21 22:00:00"
Date w/Pipe ('yyyy-MM-dd')          "2021-03-21"
Date w/Pipe ('fullDate')            "Sunday, March 21, 2021"
Date w/Pipe                         "Mar 21, 2021"