Datumformatering met behulp van kanale in Angular
Met die DatePipe-kanaal kan ons
'n spesifieke formaat vir die datum wat vertoon word, instel.
Hierdie kanaal kan die volgende
parameters vir die datumvertoonformaat aanvaar:
| Formaat | Ekwiwalent | Voorbeeld (vir en-US-lokaliteit) |
|---|---|---|
'short' |
'M/d/yy, h:mm a' |
12/31/25, 3:00 AM |
'medium' |
'MMM d, y, h:mm:ss a' |
Dec 31, 2025, 3:00:00 AM |
'long' |
'MMMM d, y, h:mm:ss a z' |
December 31, 2025 at 3:00:00 AM GMT+3 |
'full' |
'EEEE, MMMM d, y, h:mm:ss a zzzz' |
Wednesday, December 31, 2025 at 3:00:00 AM GMT+03:00 |
'shortDate' |
'M/d/yy' |
12/31/25 |
'mediumDate' |
'MMM d, y' |
Dec 31, 2025 |
'longDate' |
'MMMM d, y' |
December 31, 2025 |
'fullDate' |
'EEEE, MMMM d, y' |
Wednesday, December 31, 2025 |
'shortTime' |
'h:mm a' |
3:00 AM |
'mediumTime' |
'h:mm:ss a' |
3:00:00 AM |
'longTime' |
'h:mm:ss a z' |
3:00:00 AM GMT+3 |
'fullTime' |
'h:mm:ss a zzzz' |
3:00:00 AM GMT+03:00 |
Voorbeelde
Kom ons kyk na die kanaal se werking aan die hand van voorbeelde.
Om dit te doen, sal ons in die komponent se klas
die eienskap myDate definieer, waarin ons
'n datum sal stoor:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Voorbeeld
Kom ons vertoon ons datum sonder om enige parameters aan die kanaal deur te gee:
<div>
{{ myDate | date }}
</div>
Resultaat van die uitgevoerde kode:
<div>Dec 31, 2025</div>
Voorbeeld
Laat ons nou 'n kort datumvertoning toon:
<div>
{{ myDate | date:'shortDate' }}
</div>
Resultaat van die uitgevoerde kode:
<div>12/31/25</div>
Voorbeeld
Kom ons vertoon ons datum en vind terselfdertyd uit op watter dag van die week dit val:
<div>
{{ myDate | date:'fullDate' }}
</div>
Resultaat van die uitgevoerde kode:
<div>Wednesday, December 31, 2025</div>
Praktiese take
Gegee die datum:
public myDate: number = Date.parse('2025-01-02');
Formateer dit in die volgende formaat:
'Jan 2, 2025'
Formateer die datum uit die vorige taak in die volgende formaat:
'1/2/25, 3:00 AM'
Formateer die datum in die volgende formaat:
'1/2/25'
Formateer die datum in die volgende formaat:
'January 2, 2025 at 3:00:00 AM GMT+3'
Formateer die datum in die volgende formaat:
'Thursday, January 2, 2025'
