在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 則留言:
補充
hh : 12小時制
HH : 24小時制
張貼留言