Форматирование дат с помощью каналов в 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'