網頁

▼

2019/12/31

Angular 使用DatePipe格式化日期 format Date with DatePipe

在Angular template模版使用插值符{{...}}顯示日期物件時，可以利用DatePipe格式化日期。


例如在component定義一個屬性today = new Date()，然後在template使用{{ today }}則預設顯示為［Wed Jan 01 2020 14:17:09 GMT+0800 (台北標準時間)］（依地區不同）。

若預設的顯示效果不是我們要的，就可以用DatePipe把原本的日期格式化為需要的格式。
例如{{ today | date }}會格式化為［Jan 1, 2020］。

以下是Angular預先定義好的各種格式。

預設格式 語法 效果
origin {{ today }} Wed Jan 01 2020 14:17:09 GMT+0800 (台北標準時間)
default {{ today | date }} Jan 1, 2020
'short' {{ today | date:'short' }} 1/1/20, 2:17 PM
'medium' {{ today | date:'medium' }} Jan 1, 2020, 2:17:09 PM
'long' {{ today | date:'long' }} January 1, 2020 at 2:17:09 PM GMT+8
'full' {{ today | date:'full' }} Wednesday, January 1, 2020 at 2:17:09 PM GMT+08:00
'shortDate' {{ today | date:'shortDate' }} 1/1/20
'mediumDate' {{ today | date:'mediumDate' }} Jan 1, 2020
'longDate' {{ today | date:'longDate' }} January 1, 2020
'fullDate' {{ today | date:'fullDate' }} Wednesday, January 1, 2020
'shortTime' {{ today | date:'shortTime' }} 2:17 PM
'mediumTime' {{ today | date:'mediumTime' }} 2:17:09 PM
'longTime' {{ today | date:'longTime' }} 2:17:09 PM GMT+8
'fullTime' {{ today | date:'fullTime' }} 2:17:09 PM GMT+08:00

除了預定義格式，也可以使用自訂格式，請參考自訂格式符號定義列表。

以下是一些工作中常用的格式。

自訂格式 語法 效果
'yyyyMMdd' {{ today | date:'yyyyMMdd' }} 20200101
'yyyy-MM-dd' {{ today | date:'yyyy-MM-dd' }} 2020-01-01
'yyyy/MM/dd' {{ today | date:'yyyy/MM/dd' }} 2020/01/01
'yyyyMMddhhmmss' {{ today | date:'yyyyMMddhhmmss' }} 20200101025839
'yyyy-MM-dd hh:mm:ss' {{ today | date:'yyyy-MM-dd hh:mm:ss' }} 2020-01-01 02:58:39
'yyyy/MM/dd hh:mm:ss' {{ today | date:'yyyy/MM/dd hh:mm:ss' }} 2020/01/01 02:58:39

用Angular CLI建立Angular專案，在app.component.ts的AppComponent類別定義today屬性。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
  today = new Date(); // <-- 定義一個日期屬性
}

把AppComponent對應的template app.component.html中原本的內容刪除，使用插值符及DatePipe來顯示today的日期格式。

app.component.html

<p>今天的日期是 {{ today | date:'yyyy-MM-dd' }}。</p>
<p>現在的時間是 {{ today | date:'hh:mm:ss' }}。</p>

顯示效果如下：




參考：

1 則留言: