Angular의 날짜 형식

1. Angular의 날짜 파이프
2. Angular 날짜 파이프 예제
3. 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개의 미리 정의된 형식이 있습니다. 그러나 사용자 지정 날짜 형식을 만들고 연대, 주, 달의 주, 날짜 등과 같은 요소를 더 포함할 수도 있습니다.