angular用DatePipe進行日期轉換

angular中日期轉換爲要顯示的格式可以使用DatePipe：

（1）HTML 

<span *ngIf="CompareYear(notification.date) !== currentYear; else elseCurrentYear">

  {{ notification.date | date: 'y MMM d' }}

</span>

<ng-template #elseCurrentYear>

  <span *ngIf="CompareDate(notification.date) !== today; else elseToday">

    {{ notification.date | date: 'MMM d' }}

  </span>

</ng-template>

<ng-template #elseToday>

  <span>

    {{ notification.date | date: 'h:mm a' }}

  </span>

</ng-template>

 

（2）TS

import { DatePipe } from '@angular/common';

export class XXX{

today = this.datePipe.transform(Date.now(), 'yyyy-MM-dd');

currentYear = this.datePipe.transform(Date.now(), 'yyyy');



constructor(private readonly datePipe: DatePipe) {}



 CompareDate(date: any): any {

    return this.datePipe.transform(date, 'yyyy-MM-dd');

  }



  CompareYear(date: any): any {

    return this.datePipe.transform(date, 'yyyy');

  }

}

 

注：https://angular.io/api/common/DatePipe

format包括：short、medium、long、full、shortDate、mediumDate、longDate、fullDate、shortTime、mediumTime、longTime、fullTime；

時間的顯示樣式

類型	形式	例子
short	M/d/yy, h:mm a	6/15/15, 9:03 AM
medium	MMM d, y, h:mm:ss a	Jun 15, 2015, 9:03:01 AM
long	MMMM d, y, h:mm:ss a z	June 15, 2015 at 9:03:01 AM GMT+1
full	EEEE, MMMM d, y, h:mm:ss a zzzz	Monday, June 15, 2015 at 9:03:01 AM GMT+01:00
shortDate	M/d/yy	6/15/15
mediumDate	MMM d, y	Jun 15, 2015
longDate	MMMM d, y	June 15, 2015
fullDate	EEEE, MMMM d, y	Monday, June 15, 2015
shortTime	h:mm a	9:03 AM
mediumTime	h:mm:ss a	9:03:01 AM
longTime	h:mm:ss a z	9:03:01 AM GMT+1
fullTime	h:mm:ss a zzzz	9:03:01 AM GMT+01:00