Định dạng ngày tháng bằng các pipe trong Angular
Với pipe DatePipe, chúng ta có thể
đặt một định dạng cụ thể cho ngày tháng được hiển thị.
Pipe này có thể nhận các
tham số sau để định dạng hiển thị ngày tháng:
| Định dạng | Tương đương | Ví dụ (cho locale en-US) |
|---|---|---|
'short' |
'M/d/yy, h:mm a' |
12/31/25, 3:00 AM |
'medium' |
'MMM d, y, h:mm:ss a' |
Dec 31, 2025, 3:00:00 AM |
'long' |
'MMMM d, y, h:mm:ss a z' |
December 31, 2025 at 3:00:00 AM GMT+3 |
'full' |
'EEEE, MMMM d, y, h:mm:ss a zzzz' |
Wednesday, December 31, 2025 at 3:00:00 AM GMT+03:00 |
'shortDate' |
'M/d/yy' |
12/31/25 |
'mediumDate' |
'MMM d, y' |
Dec 31, 2025 |
'longDate' |
'MMMM d, y' |
December 31, 2025 |
'fullDate' |
'EEEE, MMMM d, y' |
Wednesday, December 31, 2025 |
'shortTime' |
'h:mm a' |
3:00 AM |
'mediumTime' |
'h:mm:ss a' |
3:00:00 AM |
'longTime' |
'h:mm:ss a z' |
3:00:00 AM GMT+3 |
'fullTime' |
'h:mm:ss a zzzz' |
3:00:00 AM GMT+03:00 |
Ví dụ
Hãy xem cách hoạt động của pipe qua các ví dụ.
Để làm điều này, trong lớp component, hãy đặt
thuộc tính myDate, trong đó chúng ta sẽ ghi
ngày tháng:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Ví dụ
Hãy hiển thị ngày tháng của chúng ta mà không truyền bất kỳ tham số nào vào pipe:
<div>
{{ myDate | date }}
</div>
Kết quả của mã được thực thi:
<div>Dec 31, 2025</div>
Ví dụ
Bây giờ hãy hiển thị ngày tháng ở dạng ngắn gọn:
<div>
{{ myDate | date:'shortDate' }}
</div>
Kết quả của mã được thực thi:
<div>12/31/25</div>
Ví dụ
Hãy hiển thị ngày tháng của chúng ta và đồng thời biết được nó rơi vào thứ mấy trong tuần:
<div>
{{ myDate | date:'fullDate' }}
</div>
Kết quả của mã được thực thi:
<div>Wednesday, December 31, 2025</div>
Bài tập thực hành
Cho ngày tháng:
public myDate: number = Date.parse('2025-01-02');
Hãy định dạng nó theo dạng sau:
'Jan 2, 2025'
Hãy định dạng ngày tháng từ bài tập trước theo dạng sau:
'1/2/25, 3:00 AM'
Hãy định dạng ngày tháng theo dạng sau:
'1/2/25'
Hãy định dạng ngày tháng theo dạng sau:
'January 2, 2025 at 3:00:00 AM GMT+3'
Hãy định dạng ngày tháng theo dạng sau:
'Thursday, January 2, 2025'
