Formatering af datoer med pipes i Angular

Med DatePipe kan vi angive et bestemt format for den viste dato. Denne pipe kan acceptere følgende parametre for datoens visningsformat:

Eksempler

Lad os se pipen i aktion med eksempler. For at gøre dette, i komponentklassen, definerer vi egenskaben myDate, hvori vi tilskriver datoen:

app/app.component.tsexport class AppComponent {
  public myDate: number = Date.parse('2025-12-31');
}

Eksempel

Lad os udskrive vores dato uden at sende nogen parametre til pipen:

app/app.component.html<div>
  {{ myDate | date }}
</div>

Resultatet af den udførte kode:

html<div>Dec 31, 2025</div>

Eksempel

Lad os nu vise datoen i kort format:

app/app.component.html<div>
  {{ myDate | date:'shortDate' }}
</div>

Resultatet af den udførte kode:

html<div>12/31/25</div>

Eksempel

Lad os udskrive vores dato og samtidig finde ud af hvilken ugedag den falder på:

app/app.component.html<div>
  {{ myDate | date:'fullDate' }}
</div>

Resultatet af den udførte kode:

html<div>Wednesday, December 31, 2025</div>

Praktiske opgaver

typescriptpublic myDate: number = Date.parse('2025-01-02');

typescript'Jan 2, 2025'

typescript'1/2/25, 3:00 AM'

typescript'1/2/25'

typescript'January 2, 2025 at 3:00:00 AM GMT+3'

typescript'Thursday, January 2, 2025'