DatePipe

Форматирует значение даты в соответствии с правилами локали.

DatePipe выполняется только при обнаружении чистого изменения входного значения. Чистым изменением считается изменение примитивного входного значения (например, String, Number, Boolean или Symbol) либо изменение ссылки на объект (например, Date, Array, Function или Object).

Обратите внимание: изменение объекта Date не приводит к повторному выполнению канала. Чтобы канал выполнился снова, необходимо создать новый объект Date.

В Angular включены данные только для локали en-US. Чтобы локализовать даты на другом языке, необходимо импортировать соответствующие данные локали. Дополнительные сведения см. в руководстве по i18n.

Часовой пояс форматируемого значения можно задать, передав его вторым параметром канала, или указав значение по умолчанию с помощью токена внедрения DATE_PIPE_DEFAULT_OPTIONS. Значение, переданное вторым параметром, имеет приоритет над значением, заданным с помощью токена внедрения.

Результат этого канала не пересчитывается при изменении входного значения. Чтобы не форматировать дату при каждом цикле обнаружения изменений, считайте дату неизменяемым объектом и меняйте ссылку на него, когда нужно повторно запустить канал.

Предопределённые параметры формата

Пользовательские параметры формата

Можно составить строку формата, используя символы для указания компонентов значения даты и времени, как описано в таблице ниже. Детали формата зависят от локали. Поля, помеченные звездочкой (*), доступны только в дополнительном наборе данных для указанной локали.

Примеры формата

В этих примерах дата преобразуется в различные форматы. Предполагается, что dateObj — это объект JavaScript Date со значениями: год — 2015, месяц — 6, день — 15, час — 21, минута — 43, секунда — 11; дата задана в местном времени для локали en-US.

{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mm:ss' }}       // output is '43:11'
{{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }}  // output is 'Jun 15, 2015 at 09:43 PM'

Пример использования

Следующий компонент использует канал даты, чтобы отображать текущую дату в разных форматах.

@Component({
 selector: 'date-pipe',
 template: `<div>
   <p>Today is {{today | date}}</p>
   <p>Or if you prefer, {{today | date:'fullDate'}}</p>
   <p>The time is {{today | date:'h:mm a z'}}</p>
 </div>`
})
// Get the current date and time as a date-time value.
export class DatePipeComponent {
  today: number = Date.now();
}