Datum formatieren mit Pipe in Angular

1. Wie verwendet man Angular Date Pipe?
2. Beispiel für eine Zeitzone mit einer Angular Date Pipe
3. Beispiel einer Angular Dattelpfeife mit Länderstandort
4. Erstellen Sie eine benutzerdefinierte Datums-Pipe in Angular

Mit Angular Date Pipe können wir Daten in Angular formatieren, indem wir das angegebene Format, die Zeitzone und bestimmte Details verwenden. Es hat vordefinierte Formate und benutzerdefinierte Formatzeichenfolgen. In benutzerdefinierten Formatzeichenfolgen können wir das Datumsformat, die Zeitzone, das Ländergebietsschema usw. einfach anpassen. Anhand einiger wesentlicher Schritte werden wir alle diese Schritte im Detail besprechen. Dieser Artikel wird alle Ihre Zweifel ausräumen und das Format Date Using Pipe in Angular anhand von Beispielen demonstrieren. Lass uns anfangen.

Wie verwendet man Angular Date Pipe?

Die Komponente @angular/common führt die Date Pipe ein. Pipes können verwendet werden, um Daten in Angular zu formatieren, einschließlich Werte, Prozent, Datumsangaben und vieles mehr. Bei der Gestaltung einer Angular Dattelpfeife werden hauptsächlich drei Parameter berücksichtigt.

• Format
• Time zone
• Locale

Bevor Sie die oben genannten Parameter diskutieren, ist es wichtig, die Syntax der Angular Datumspipe zu kennen, indem Sie das Format, die Zeitzone und das Gebietsschema verwenden.

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

Parameter und Beschreibung der Angular Datumspfeife

Format: Als Formatparameter können wir Standard-Angulardatumsformate oder benutzerdefinierte Datumsformate angeben. mediumDate ist der Standardwert.

Time zone: Die Standardzeitzone ist die lokale Systemzeitzone des Benutzercomputers. Wir können Zeitzonen-Offset (0530), konventionelles UTC/GMT (IST) oder das Akronym der östlichen US-Zeitzone als zusätzlichen Parameter angeben, um die Zeitzone anzupassen.

Locale: Gibt die Formatregeln des Gebietsschemas an, die verwendet werden sollten. Wenn nicht definiert oder konfiguriert, ist der Standardwert unser Projektgebietsschema (en-US).

Darüber hinaus müssen Sie wissen, dass Angular nur mit den en-US-Gebietsschemadaten geliefert wird. Sie müssen relevante Gebietsschemadaten importieren, um die Daten in einer beliebigen Sprache zu lokalisieren.

Liste aller vordefinierten Datumsformate in Angular

Angular Datumspfeife hat 12 vordefinierte Formate. Lassen Sie uns die Liste all dieser integrierten Datumsformate im Detail besprechen.

• 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'}}

Klicken Sie hier, um das Format von Datum und Uhrzeit zur weiteren Klärung zu überprüfen.

Beispiel für eine Zeitzone mit einer Angular Date Pipe

Wir können der Datumspipe die Zeitzone als Parameter und das Datumsformat geben, um das Datum in einer bestimmten UTC anzuzeigen. Zeitzonenabweichung (‘0530’), herkömmliches UTC/GMT (IST) oder kontinentales US-Zeitzonenakronym sind Optionen für den Zeitzonenparameter.
Zum Beispiel, um die Zeit in der IST-Zeitzone anzuzeigen.

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

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

Ausgabe:

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

Beispiel einer Angular Dattelpfeife mit Länderstandort

Es ist notwendig, dem Angular Datumsrohr den Ländercode als drittes Argument zu geben, um das Datum gemäß den Formatstandards des Ländergebietsschemas anzuzeigen, wie unten gezeigt.

Deutschland verwendet beispielsweise die Deutsche Standardzeit und hat einen Zeitzonen-Offset von +01:00. Verwenden Sie den Gebietsschemacode de als Parameter in Angular, um Datum und Uhrzeit im Gebietsschema Deutschland anzuzeigen, wie unten gezeigt.

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

Ausgabe:

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

Erstellen Sie eine benutzerdefinierte Datums-Pipe in Angular

Angular verwendet standardmäßig das Datumsformat mediumDate. Was ist, wenn wir es ändern und unser eigenes einzigartiges Format anstelle von integrierten Formaten wie MMM d, y, h:mm: ss a verwenden möchten?

Dies zeigt die Zeit als January 01, 2022, 11:45:13 PM an.

Wir werden in unseren Angularanwendungen häufig Datumsangaben anzeigen, und wir müssen jedes Mal das Formatargument übergeben. Wie unten zu sehen ist, können wir unser benutzerdefiniertes Datumsrohr erstellen und es in der gesamten Anwendung verwenden, um dies zu umgehen.

{{ todayDate | customDate }}

Ausgabe:

January 01, 2022, 11:45:13 PM

Befolgen Sie die nachstehenden Anweisungen, um eine benutzerdefinierte Datumspfeife herzustellen. Fügen Sie einer Datei namens custom.datepipe.ts den folgenden Code hinzu.

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 ");   } }

Danach besteht der nächste Schritt darin, CustomDatePipe zu importieren und es dem AppModule-Deklarationsarray hinzuzufügen.

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

Jetzt sind wir auf der Bühne, wo wir unsere benutzerdefinierte Datumspfeife in der Komponentendatei verwenden können.

{{todayDate | customDate}}

Ausgabe:

Jan 5, 2022, 5:25:36 PM

Benutzerdefinierte Datumsformate:

In Angular können Sie Ihre eigenen Datumsformate erstellen. Nachfolgend finden Sie eine umfassende Liste aller möglichen benutzerdefinierten Datumsformate.

Beispiel für benutzerdefiniertes Format:

Hier haben wir ein sehr einfaches Beispiel für ein benutzerdefiniertes Format erwähnt.

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

Ausgabe:

05/01/22 17:25

Wenn Sie mehr über die Angular Dattelpfeife erfahren möchten, klicken Sie hier