Angular Date Pipe & Datumsformatierung in Angular mit Beispielen

So verwenden Sie die eckige Datumspfeife

Die eckige Datumspfeife akzeptiert drei Parameter

1. Format
2. Zeitzone
3. Gebietsschema

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

Beispiele für eckige Datumspfeifen

Jetzt werden wir einige Beispiele für eckige Dattelpfeifen durchgehen, um es besser zu verstehen.

Ich habe in meinem Angular-Projekt eine Date-Pipe-Komponente erstellt und aktuelle Datetime-Werte in verschiedenen Formaten wie Millisekunden, Datumsobjekt, Datetime-String, ISO-Datetime-String hinzugefügt.

import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-datepipe', templateUrl: './datepipe.component.html', styleUrls: ['./datepipe.component.scss']})export class DatepipeComponent implements OnInit { todayNumber: number = Date.now(); todayDate : Date = new Date(); todayString : string = new Date().toDateString(); todayISOString : string = new Date().toISOString(); constructor() { } ngOnInit() { }}

Jetzt zeige ich sie in meiner Komponente mit einem eckigen Datumsrohr an, wie unten gezeigt.

DateTime as Milliseconds : {{todayNumber}} datepipe:{{todayNumber | date}}
DateTime as object : {{todayDate}} datepipe:{{todayDate | date}}
DateTime as string : {{todayString}} datepipe:{{todayString | date}}
DateTime as iso string : {{todayISOString}} datepipe:{{todayISOString | date}}
Output:DateTime as Milliseconds : 1560617468681 datepipe:Jun 15, 2019DateTime as object : Sat Jun 15 2019 22:21:08 GMT+0530 (India Standard Time) datepipe:Jun 15, 2019DateTime as string : Sat Jun 15 2019 datepipe:Jun 15, 2019DateTime as iso string : 2019-06-15T16:51:08.681Z datepipe:Jun 15, 2019

Alle Arten von datetime-Werten zeigen das Datum im Format „MMM d, y“ an, das das standardmäßige Angular-Datumsformat „mediumDate“ ist.

Um das datetime-Format in eckig zu ändern, müssen wir den date time format-Parameter an die eckige Pipe übergeben, wie unten gezeigt

{{ date_value | date :'short'}}// 6/15/19, 5:24 PM

Das Format „kurz“ ist eines der vordefinierten Datumsformate in Winkelform, das unseren Datumswert in das Format „M/d/yy, h:mm a“ umwandelt.

Liste aller vordefinierten Datumsformate in Angular

Eckige Datumspfeife hat 12 vordefinierte Datumsformate, wie in der obigen Tabelle gezeigt.

Wir müssen den ersten Parameter „format“ als Zeichenfolge in Anführungszeichen mit den unten aufgeführten vordefinierten Datumsformatnamen übergeben.

1. Kurz
2. Mittel
3. Lang
4. Voll
5. Kurzes Date
6. MittleresDatum
7. Langes Datum
8. VollesDatum
9. Kurze Zeit
10. Mittlere Zeit
11. Lange Zeit
12. Vollzeit

Beispiel für eine Zeitzone mit eckigem Datumsrohr

Zusätzlich zum Datumsformat können wir die Zeitzone als Parameter an die Datumspipe übergeben, um das Datum in einer bestimmten Zeitzone anzuzeigen.

Der Zeitzonenparameter kann ein Zeitzonenoffset (‘0530’) oder Standard-UTC/GMT (IST) oder eine kontinentale US-Zeitzonenabkürzung sein.

Zum Beispiel, um die Zeit in der IST-Zeitzone anzuzeigen

Today is {{todayDate | date:'short':'IST'}}Today is {{todayDate | date:'short':'+0530'}}Result:Today is 6/19/19, 12:29 PM

So zeigen Sie die UTC-Datumszeit in Winkeln mit der Datumspipe an

Um UTC-Datum und -Uhrzeit in Angular anzuzeigen, müssen wir die Zeitzonenparameter als „UTC“ oder den Zeitzonen-Offset als „+0000“ übergeben, wie unten gezeigt

Today is {{todayDate | date:'short':'UTC'}}Today is {{todayDate | date:'short':'+0000'}}Result:Today is 6/19/19, 11:11 AM

Beispiel für eine eckige Datumspfeife mit Ländereinstellung

Um das Datum gemäß den Formatregeln des Ländergebietsschemas anzuzeigen, müssen wir den Ländergebietscode als dritten Parameter an die eckige Datumspipe übergeben, wie unten gezeigt.

Beispielsweise folgt Frankreich der „Mitteleuropäischen Sommerzeit“ und hat einen Zeitzonenversatz „+0200“.

Um Datum und Uhrzeit im französischen Gebietsschema in Angular anzuzeigen, verwenden Sie den Gebietsschemacode „fr“ als Parameter, wie unten gezeigt

French date time is {{todayDate | date:'full':'+0200':'fr'}}
Result:French date time is mercredi 19 juin 2019 à 13:25:15 GMT+02:00

Der obige Code gibt jedoch den Fehler in der Konsole zurück, der besagt, dass Gebietsschemadaten für das Gebietsschema „fr“ fehlen.

In unserer Anwendung haben wir keine Gebietsschemainformationen für „fr“.

Informationen zum Hinzufügen der Ländereinstellungen finden Sie im Artikel Angular Currency Pipe

Erstellen einer benutzerdefinierten Date Pipe in Angular

Das Standard-Datumsformat in Angular ist „mediumDate“.

Was ist, wenn wir es ändern und durch unser eigenes benutzerdefiniertes Format wie „EEEE d MMMM y h:mm a“ ersetzen möchten?

Die Uhrzeit wird als „Mittwoch, 19. Juni 2019, 20:33 Uhr“ angezeigt.

In unseren Winkelprojekten werden wir sehr häufig Datumsangaben anzeigen und jedes Mal, wenn wir den Formatparameter übergeben müssen.

Um dies zu vermeiden, können wir unsere eigene benutzerdefinierte Datumspfeife mit dem obigen Format erstellen und sie wie unten gezeigt in der gesamten Anwendung verwenden.

{{ todayDate | customDate }}Result:Wednesday 19 June 2019 8:33 PM

Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Datumspfeife zu erstellen

Erstellen Sie eine Datei namens custom.datepipe.ts und fügen Sie 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, "EEEE d MMMM y h:mm a"); } }

Und importieren Sie CustomDatePipe in app.module.ts und fügen Sie es in das Deklarationsarray von AppModule ein.

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

Jetzt können wir unsere benutzerdefinierte Datumspfeife in der Komponentendatei verwenden, wie unten gezeigt

 {{todayDate | customDate}} Result: Thursday 20 June 2019 4:15 AM

Benutzerdefinierte Datumsformate in Angular definieren

Zusätzlich zu den oben genannten Datums-Zeit-Formaten können wir unsere eigenen benutzerdefinierten Datums-Zeit-Formate mit den folgenden Symbolen definieren.

Zum Beispiel {{heute | date:'GGGG'}} zeigt die Zeitepoche „Anno Domini“

Wir können diese Symbole kombinieren, um unsere eigenen Datumsformate anzuzeigen, wie unten gezeigt.

{{today | date:'EEEE d MMMM y GGGG'}}// Tuesday 18 June 2019 Anno Domini