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