Angular에서 파이프를 사용하여 날짜 형식 지정

1. Angular Date Pipe를 사용하는 방법은 무엇입니까?
2. Angular 날짜 파이프를 사용하는 시간대 예
3. 국가 위치가 있는 각 날짜 파이프의 예
4. Angular에서 사용자 지정 날짜 파이프를 만듭니다

Angular Date Pipe를 사용하면 지정된 형식, 시간대 및 특정 세부 정보를 사용하여 Angular의 날짜 형식을 지정할 수 있습니다. 미리 정의된 형식과 사용자 지정 형식 문자열이 있습니다. 사용자 지정 형식 문자열에서 날짜 형식, 시간대, 국가 로캘 등을 쉽게 사용자 지정할 수 있습니다. 몇 가지 필수 단계의 도움으로 이러한 모든 단계에 대해 자세히 설명합니다. 이 기사는 모든 의심을 없애고 예제를 통해 Angular에서 파이프를 사용하여 날짜 형식 지정을 보여줍니다. 의 시작하자.

Angular Date Pipe를 사용하는 방법은 무엇입니까?

@angular/common 구성 요소는 날짜 파이프를 도입합니다. 파이프는 값, 백분율, 날짜 등을 포함하여 Angular의 데이터 형식을 지정하는 데 사용할 수 있습니다. Angular 데이트 파이프를 설계할 때 주로 세 가지 매개변수를 고려합니다.

• Format
• Time zone
• Locale

위에서 언급한 매개변수를 논의하기 전에 형식, 시간대 및 로케일을 사용하여 Angular 날짜 파이프의 구문을 아는 것이 필수적입니다.

{{ date_Value | date [ : format [ : timeZone [ : locale ] ] ] }}

Angular Date Pipe의 매개변수 및 설명

Format: 형식 매개변수로 표준 Angular 날짜 형식 또는 사용자 지정 날짜 형식을 제공할 수 있습니다. ‘mediumDate’가 기본값입니다.

Time zone: 표준 시간대는 사용자 컴퓨터의 로컬 시스템 시간대입니다. 시간대 오프셋(0530), 기존 UTC/GMT(IST) 또는 미국 동부 시간대 약어를 추가 매개변수로 제공하여 시간대를 조정할 수 있습니다.

Locale: 사용해야 하는 로케일 형식 규칙을 나타냅니다. 정의되지 않거나 구성된 경우 기본값은 프로젝트 로케일(en-US)입니다.

또한 Angular는 기본적으로 en-US 로케일 데이터만 제공된다는 점을 알아야 합니다. 모든 언어로 날짜를 현지화하려면 관련 로케일 데이터를 가져와야 합니다.

Angular에서 미리 정의된 모든 날짜 형식 목록

Angular 날짜 파이프에는 12개의 미리 정의된 형식이 있습니다. 이러한 모든 기본 제공 날짜 형식 목록에 대해 자세히 살펴보겠습니다.

• short: M/d/yy, h:mm a, 1/01/22, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'short'}}
• medium: MMM d, y, h:mm:ss a, Jan 01, 2022, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'medium'}}
• long: MMMM d, y, h:mm:ss a z, Jan 01, 2022 at 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'long'}}
• longDate: MMMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'longDate'}}
• fullDate: EEEE, MMMM d, y, Saturday, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'fullDate'}}
• shortTime: h:mm a, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'shortTime'}}
• mediumTime: h:mm:ss a, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'mediumTime'}}
• longTime: h:mm:ss a z, 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'longTime'}}
• fullTime: h:mm:ss a zzzz, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'fullTime'}}
• full: EEEE, MMMM d, y, h:mm:ss a zzzz, Saturday, Jan 01, 2021 at 11:45:13 PM GMT+05:30. Its Angular datepipe code is {{todayDate | date:'full'}}
• shortDate: M/d/yy, 1/01/22. Its Angular datepipe code is {{todayDate | date:'shortDate'}}
• mediumDate: MMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'mediumDate'}}

자세한 내용은 여기를 클릭하여 날짜 및 시간 형식을 확인하십시오.

Angular 날짜 파이프를 사용하는 시간대 예

특정 UTC로 날짜를 표시하기 위해 날짜 파이프와 날짜 형식에 대한 매개변수로 시간대를 지정할 수 있습니다. 표준 시간대 편차(0530), 기존 UTC/GMT(IST) 또는 미국 대륙 표준 시간대 약어는 모두 표준 시간대 매개변수에 대한 옵션입니다.
예를 들어 IST 시간대의 시간을 표시합니다.

Today is {{todayDate | date:'short':'IST'}}

Today is {{todayDate | date:'short':'+05:00'}} 

출력:

Today is 1/02/19, 3:30 PM 

국가 위치가 있는 각 날짜 파이프의 예

아래와 같이 국가 로케일 형식 표준에 따라 날짜를 표시하려면 Angular 날짜 파이프에 세 번째 인수로 국가 로케일 코드를 제공해야 합니다.

예를 들어 독일은 독일 표준시를 사용하고 +01:00의 시간대 오프셋이 있습니다. 아래와 같이 로케일 코드 de를 Angular의 매개변수로 사용하여 독일 로케일의 날짜와 시간을 표시합니다.

<p>The current German date time is  {{todayDate | date:'full':'+01:00':'de'}}</p>

출력:

The current German date time is Mittwoch, 5. Januar 2022 um 12:50:38 GMT+01:00

Angular에서 사용자 지정 날짜 파이프를 만듭니다

Angular는 기본적으로 mediumDate 날짜 형식을 사용합니다. 이를 변경하고 MMM d, y, h:mm: ss a와 같은 기본 제공 형식 대신 고유한 형식을 사용하려면 어떻게 해야 합니까?

이것은 January 01, 2022, 11:45:13 PM으로 시간을 표시합니다.

Angular 응용 프로그램에서 날짜를 많이 표시할 것이며 매번 형식 인수를 전달해야 합니다. 아래에서 볼 수 있듯이 사용자 지정 날짜 파이프를 만들고 이를 우회하기 위해 애플리케이션 전체에서 사용할 수 있습니다.

{{ todayDate | customDate }}

출력:

January 01, 2022, 11:45:13 PM

사용자 지정 날짜 파이프를 만들려면 아래 지침을 따르세요. custom.datepipe.ts라는 파일에 다음 코드를 추가합니다.

import { Pipe, PipeTransform } from '@angular/core';

  import { DatePipe } from '@angular/common';  

  @Pipe({

   name: 'customDate'

  })

  export class CustomDatePipe extends 

 DatePipe implements PipeTransform {

   transform(value: any, args?: any): any {
 return super.transform(value, " MMM d, y, h:mm:ss a ");   } }

이 작업을 수행한 후 다음 단계는 CustomDatePipe를 가져와서 AppModule 선언 배열에 추가하는 것입니다.

 import {CustomDatePipe} from './custom.datepipe';
   @NgModule({
    declarations: [
    CustomDatePipe
   ]);

이제 구성 요소 파일에서 사용자 지정 날짜 파이프를 사용할 수 있는 단계에 있습니다.

{{todayDate | customDate}}

출력:

Jan 5, 2022, 5:25:36 PM

사용자 지정 날짜 형식:

Angular에서는 자신만의 날짜 형식을 만들 수 있습니다. 다음은 가능한 모든 사용자 지정 날짜 형식의 전체 목록입니다.

사용자 정의 형식 예:

여기에서 사용자 지정 형식의 매우 간단한 예를 언급했습니다.

{{todayDate | date:'dd/MM/yy HH:mm'}}     

출력:

05/01/22 17:25

Angular 날짜 파이프에 대해 자세히 알아보려면 여기를 클릭하세요