Angular의 날짜 형식

Angular의 DatePipe를 사용하여 timezone의 날짜를 사용, 변경 또는 추가하고 날짜 형식으로 날짜를 표시하는 방법을 소개합니다.

Angular의 날짜 파이프

Angular 날짜 파이프는 제공된 날짜 형식, 시간대 및 국가 로케일 정보에 따라 Angular의 날짜 형식을 지정하는 데 사용됩니다.

DatePipe를 사용하여 미리 정의된 Angular 날짜 형식 또는 사용자 지정 Angular 날짜 형식에 따라 날짜 개체, 숫자 또는 ISO 날짜 문자열을 쉽게 변환할 수 있습니다.

Angular DatePipe는 format, timezone 및 locale의 세 가지 매개변수를 허용합니다.

format

형식 매개변수에 미리 정의된 날짜 형식 또는 사용자 지정 날짜 형식을 전달할 수 있습니다.

timezone

timezone 매개변수에서 기본 시간대는 사용자 시스템의 로컬 시스템 시간대입니다. 시간대 offset(‘0510’) 또는 표준 UTC/GMT(CET) 또는 미국 대륙 시간대 약어를 전달하여 시간대를 변경할 수 있으며 이는 선택적 매개변수입니다.

locale

locale은 사용할 로케일 형식 규칙을 나타냅니다. 로케일의 기본값은 설정되거나 정의되지 않은 경우 프로젝트 로케일(en_US)입니다. 로케일은 선택적 매개변수입니다.

Angular 날짜 파이프 예제

Angular DatePipe를 더 잘 이해하기 위해 날짜 형식이 다른 몇 가지 예를 논의합니다.

우선 app.component.ts에 이 코드를 추가합니다.

#angular

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  today: Date = new Date();
  pipe = new DatePipe('en-US');
  todayWithPipe = null;
  ngOnInit(): void {
    this.todayWithPipe = this.pipe.transform(Date.now(), 'dd/MM/yyyy');
  }
}

위 코드의 @angular/common에서 DatePipe를 가져왔습니다. Initial에 구현된 AppComponent 클래스를 내보냈으며 그 안에 en-US 로케일을 사용하여 새 DatePipe를 만들었습니다.

app.component.html에 코드를 추가하여 사전 정의된 날짜 형식 dd/MM/yyyy로 날짜를 표시합니다.

<div>Today Date is: {{ todayWithPipe }}</div>

출력:

Angular의 미리 정의된 날짜 형식 목록

Angular DatePipe에는 위의 표와 같이 12개의 미리 정의된 형식이 있습니다. 그러나 사용자 지정 날짜 형식을 만들고 연대, 주, 달의 주, 날짜 등과 같은 요소를 더 포함할 수도 있습니다.