Formatimi i datave me përdorimin e pipe-ve në Angular
Me ndihmën e pipe-it DatePipe ne mund
të caktojmë një format të caktuar për datën që do të shfaqet.
Ky pipe mund të pranojë parametrat e mëposhtëm
për formatin e shfaqjes së datës:
| Formati | Ekuivalenti | Shembull (për lokalizimin en-US) |
|---|---|---|
'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 |
Shembuj
Le të shohim funksionimin e pipe-it me shembuj.
Për këtë, në klasën e komponentit le të caktojmë
vetinë myDate, në të cilën do të regjistrojmë
datën:
app/app.component.tsexport class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Shembull
Le të shfaqim datën tonë, pa kaluar në pipe asnjë parametër:
app/app.component.html<div>
{{ myDate | date }}
</div>
Rezultati i kodit të ekzekutuar:
html<div>Dec 31, 2025</div>
Shembull
Tani le të shfaqim datën në formë të shkurtër:
app/app.component.html<div>
{{ myDate | date:'shortDate' }}
</div>
Rezultati i kodit të ekzekutuar:
html<div>12/31/25</div>
Shembull
Le të shfaqim datën tonë dhe njëkohësisht të zbulojmë në cilin ditë të javës bie:
app/app.component.html<div>
{{ myDate | date:'fullDate' }}
</div>
Rezultati i kodit të ekzekutuar:
html<div>Wednesday, December 31, 2025</div>
Detyra praktike
Është dhënë data:
typescriptpublic myDate: number = Date.parse('2025-01-02');
Formatoni atë në formën e mëposhtme:
typescript'Jan 2, 2025'
Formatoni datën nga detyra e mëparshme në formën e mëposhtme:
typescript'1/2/25, 3:00 AM'
Formatoni datën në formën e mëposhtme:
typescript'1/2/25'
Formatoni datën në formën e mëposhtme:
typescript'January 2, 2025 at 3:00:00 AM GMT+3'
Formatoni datën në formën e mëposhtme:
typescript'Thursday, January 2, 2025'