網頁

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.tsAppComponent類別定義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 則留言: