Datum formatieren mit Pipe in Angular

Muhammad Adil 30 Januar 2023
  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
Datum formatieren mit 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.

Typ Format Beschreibung Beispiele
Epoche: G, GG & GGG Abgekürzt AD
GGGG Weit Anno Domini
GGGGG Eng A
Jahr: y Numerisch: Mindestziffern 2022
yy Numerisch: 2 Ziffern und mit Null aufgefüllt 22
yyy Numerisch: 3 Ziffern und aufgefüllte Nullen 2022
yyyy Numerisch: 4 Ziffern oder mehr und mit Nullen aufgefüllt 2022
Monat: M Numerisch: 1 Ziffer 1
MM Numerisch: 2 Ziffern und mit Null aufgefüllt 01
MMM Abgekürzt Jan
MMMM Weit January
MMMMM Eng J
Monat eigenständig L Numerisch: 1 Ziffer 8
LL Numerisch: 2 Ziffern + Null aufgefüllt 08
LLL Abgekürzt Aug
LLLL Weit August
LLLLL Eng A
Monatstag: d Numerisch: Mindestziffern 7,8
dd Numerisch: 2 Ziffern + Null aufgefüllt 13,08,19
Wochentag E, EE & EEE Abgekürzt Thu
EEEE Weit Thursday
EEEEE Eng T
EEEEEE Kurz Th
Woche des Monats W Numerisch: 1 Ziffer 2,6
Woche des Jahres w Numerisch: Mindestziffern 7,34
ww Numerisch: 2 Ziffern 43, 09
Zeitraum a, aa & aaa Abgekürzt am, pm
aaaa Weit pm
aaaaa Eng a
Zeitraum* B, BB & BBB Abgekürzt mid
BBBB Weit am, pm, midnight, afternoon, noon
BBBBB Eng md
Zeitraum eigenständig* b, bb & bbb Abgekürzt mid
bbbb Weit midnight, afternoon, evening, night
bbbbb Eng mid
Bruchteile von Sekunden S Numerisch: 1 Ziffer 5,7,2
SS Numerisch: 2 Ziffern und mit Null aufgefüllt 96,87,47
SSS Numerisch: 3 Ziffern und aufgefüllte Nullen 435,789,670
Zweite s Numerisch: Mindestziffern 3,9,56
ss Numerisch: 2 Ziffern und mit Null aufgefüllt 09,26,13
Minute m Numerisch: Mindestziffern 40,6,47,54
mm Numerisch: 2 Ziffern und mit Null aufgefüllt 04,51,23,28
Stunde 0 bis 23 H Numerisch: Mindestziffern 16
HH Numerisch: 2 Ziffern und mit Null aufgefüllt 21,19,17
Stunde 1 bis 12 h Numerisch: Mindestziffern 11
hh Numerisch: 2 Ziffern und aufgefüllte Nullen 12
Zone z, zz & zzz Kurzes, spezifisches, nicht standortbezogenes Format GMT-6
zzzz Langes, spezifisches, nicht standortbezogenes Format GMT-06:00
Z, Z Z & ZZZ Basisformat ISO8601 -0600
ZZZZ Langes lokalisiertes GMT-Format GMT-06:00
ZZZZZ ISO8601 erweitertes Format -06:00
O, OO & OOO Kurzes lokalisiertes GMT-Format GMT-6
OOOO Langes lokalisiertes GMT-Format GMT -06:00

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

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Verwandter Artikel - Angular Date