Angular에서 파이프를 사용한 날짜 형식 지정
DatePipe 파이프를 사용하여
출력할 날짜의 특정 형식을 지정할 수 있습니다.
이 파이프는 날짜 표시 형식을 위한 다음
매개변수들을 받을 수 있습니다:
| 형식 | 동등한 표현 | 예시 (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 |
예제
예제를 통해 파이프의 동작을 살펴봅시다.
컴포넌트 클래스에 myDate 속성을 정의하고
날짜를 할당해 보겠습니다:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
예제
파이프에 매개변수를 전달하지 않고 날짜를 출력해 봅시다:
<div>
{{ myDate | date }}
</div>
실행된 코드의 결과:
<div>Dec 31, 2025</div>
예제
이제 간단한 날짜 형식으로 출력해 봅시다:
<div>
{{ myDate | date:'shortDate' }}
</div>
실행된 코드의 결과:
<div>12/31/25</div>
예제
날짜를 출력하고 어떤 요일에 해당하는지도 알아봅시다:
<div>
{{ myDate | date:'fullDate' }}
</div>
실행된 코드의 결과:
<div>Wednesday, December 31, 2025</div>
실습 문제
주어진 날짜:
public myDate: number = Date.parse('2025-01-02');
다음 형식으로 지정하세요:
'Jan 2, 2025'
이전 문제의 날짜를 다음 형식으로 지정하세요:
'1/2/25, 3:00 AM'
날짜를 다음 형식으로 지정하세요:
'1/2/25'
날짜를 다음 형식으로 지정하세요:
'January 2, 2025 at 3:00:00 AM GMT+3'
날짜를 다음 형식으로 지정하세요:
'Thursday, January 2, 2025'
