Μορφοποίηση ημερομηνιών με χρήση pipes στο Angular

Με το pipe DatePipe μπορούμε να ορίσουμε μια συγκεκριμένη μορφή για την εμφανιζόμενη ημερομηνία. Αυτό το pipe μπορεί να δεχτεί τις ακόλουθες παραμέτρους για τη μορφή εμφάνισης της ημερομηνίας:

Μορφή	Ισοδύναμο	Παράδειγμα (για τοπικότητα 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`

Παραδείγματα

Ας δούμε τη λειτουργία του pipe με παραδείγματα. Για αυτό, στην κλάση του component θα ορίσουμε την ιδιότητα myDate, στην οποία θα γράψουμε μια ημερομηνία:

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

Παράδειγμα

Ας εμφανίσουμε την ημερομηνία μας, χωρίς να περάσουμε στο pipe καμία παράμετρο:

<div>
	{{ myDate | date }}
</div>

Αποτέλεσμα του εκτελεσμένου κώδικα:

<div>Dec 31, 2025</div>

Παράδειγμα

Τώρα ας εμφανίσουμε τη σύντομη μορφή ημερομηνίας:

<div>
	{{ myDate | date:'shortDate' }}
</div>

Αποτέλεσμα του εκτελεσμένου κώδικα:

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

Παράδειγμα

Ας εμφανίσουμε την ημερομηνία μας και ταυτόχρονα μάθουμε ποια μέρα της εβδομάδας πέφτει:

<div>
	{{ myDate | date:'fullDate' }}
</div>

Αποτέλεσμα του εκτελεσμένου κώδικα:

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

Πρακτικές ασκήσεις

Δίνεται η ημερομηνία:

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

Μορφοποιήστε την στην ακόλουθη μορφή:

'Jan 2, 2025'

Μορφοποιήστε την ημερομηνία από την προηγούμενη άσκηση στην ακόλουθη μορφή:

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

Μορφοποιήστε την ημερομηνία στην ακόλουθη μορφή:

'1/2/25'

Μορφοποιήστε την ημερομηνία στην ακόλουθη μορφή:

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

Μορφοποιήστε την ημερομηνία στην ακόλουθη μορφή:

'Thursday, January 2, 2025'