Форматирање на датуми со канали во Angular

Со користење на каналот DatePipe можеме да одредиме одреден формат на датумот што се прикажува. Овој канал може да ги прифати следните параметри за форматот на приказ на датумот:

Формат	Еквивалент	Пример (за 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`

Примери

Ајде да ја видиме работата на каналот преку примери. За ова, во класата на компонентата ќе поставиме својство myDate, во кое ќе ја запишеме датата:

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

Пример

Ајде да ја прикажеме нашата дата, без да пренесуваме никакви параметри во каналот:

<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'