Angular - Mit Pipes UTC zu lokaler Zeit umwandeln

Angular - Mit Pipes UTC zu lokaler Zeit umwandeln

In meinem Projekt habe ich eine Rest-API im Hintergrund. Diese liefert folgendes Datenmodell zurück:

{
  "id": 1,
  "name": "Project 01",
  "createDateUtc": "2020-10-01T16:15:12"
}

Das Erstelldatum wird als UTC in der Datenbank gespeichert und als solche zurückgegeben. Der Client kann entscheiden, ob er die UTC-Zeit oder die lokale Zeit anzeigen möchte.

Im Angular-Frontend möchte ich die lokale Zeit anzeigen lassen. Dazu erstellen wir eine eigene Pipe. Eine Pipe sieht folgendermaßen aus:

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

@Pipe({name: 'myPipe'})
export class MyPipe implements PipeTransform {
  transform(input: string): string {
    return "transformed value";
  }
}

Man implementiert PipeTransform und baut die Logik in transform(input: string) ein.

Jetzt muss man wissen, wie das UTC-Format aussieht und JavaScript damit umgeht. Für das Zeitformat gibt es die ISO 8601 .Wenn man sich im Vergleich das Ergebnis der API ansieht, fehlt dort das Z am Ende oder eine Angabe der Verschiebung (±hh:mm), um ein gültiges UTC-Format zu sein.

import { format } from 'date-fns'
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'utcToLocal'})
export class UtcToLocalPipe implements PipeTransform {
  transform(utcDateString: string): string {
    if (!utcDateString) {
      console.warn("Pipe called without UTC time");
      return;
    }

    if (utcDateString.indexOf('Z') === -1) {
      utcDateString += 'Z';
    }

    return format(new Date(utcDateString), 'yyyy-MM-dd HH:mm');
  }
}

Diese Pipe nimmt den Wert und hängt ein Z hinten an, falls es fehlt. Anschließend erstellen wir ein neues Date -Objekt mit dem UTC-Zeitstempel.

Achtung: Diese Lösung prüft nur, ob das Z vorhanden ist! Laut der ISO Norm darf die Zeitverschiebung auch im Format ±hh:mm am Ende angegeben werden. Dieser Fall wird hier nicht abgedeckt, da die API generell nichts hinten anhängt.

Fazit

Wie ihr gesehen habt, ist es einfach eine Pipe zu erstellen. Man muss wissen, dass ein UTC-Zeitstempel anders aussieht als ein lokaler Zeitstempel. Mit dieser Pipe könnt ihr eure UTC-Zeitstempel als lokale Zeit anzeigen lassen.


Bildnachweis: Pixabay.com