Datumsformat in Angular

1. Datumspfeife in Angular
2. Angular Date Pipe Beispiele
3. Liste der vordefinierten Datumsformate in Angular

Wir stellen vor, wie man Elemente verwendet, ändert oder hinzufügt und Daten aus einer Zeitzone im Datumsformat mit DatePipe in Angular anzeigt.

Datumspfeife in Angular

Angular date pipe wird verwendet, um Datumsangaben in Angular entsprechend dem bereitgestellten Datumsformat, der Zeitzone und den Ländereinstellungen zu formatieren.

Mit der DatePipe können wir ganz einfach ein Datumsobjekt, eine Zahl oder eine ISO-Datumszeichenfolge nach vorgegebenen vordefinierten Angular-Datumsformaten oder benutzerdefinierten Angular-Datumsformaten konvertieren.

Angular DatePipe akzeptiert drei Parameter: format, timezone und locale.

format

Wir können vordefinierte Datumsformate oder benutzerdefinierte Datumsformate in Formatparametern übergeben.

timezone

Im Parameter timezone ist die Standardzeitzone die lokale Systemzeitzone des Benutzercomputers. Wir können die Zeitzone ändern, indem wir den offset der Zeitzone (‘0510’) oder die Standard-UTC/GMT (CET) oder die Abkürzung der kontinentalen US-Zeitzone übergeben, und es ist ein optionaler Parameter.

locale

locale repräsentiert die zu verwendenden Locale-Formatregeln. Der Standardwert des Gebietsschemas ist unser Projektgebietsschema (en_US), wenn festgelegt oder nicht definiert. Gebietsschema ist ein optionaler Parameter.

Angular Date Pipe Beispiele

Wir werden einige Beispiele mit verschiedenen Datumsformaten besprechen, um Angular DatePipe besser zu verstehen.

Als erstes fügen wir diesen Code in unsere app.component.ts ein.

#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');
  }
}

Wir haben DatePipe aus @angular/common in den obigen Code importiert. Wir haben eine auf Initial implementierte Klasse AppComponent exportiert, in der wir eine neue DatePipe mit dem Gebietsschema en-US erstellt haben.

Wir werden Code zu app.component.html hinzufügen, um das Datum mit unserem vordefinierten Datumsformat dd/MM/yyyy anzuzeigen.

<div>Today Date is: {{ todayWithPipe }}</div>

Ausgabe:

Liste der vordefinierten Datumsformate in Angular

Angular DatePipe hat 12 vordefinierte Formate, wie in der obigen Tabelle gezeigt. Aber wir können auch unsere benutzerdefinierten Datumsformate erstellen und einige weitere Elemente wie Epoche, Woche des Jahres, Woche des Monats, Tag des Monats usw. hinzufügen.