Метод 1: базовое форматирование даты

Самый простой способ отформатировать временную метку Firestore — использовать канал даты Angular. Date Pipe предоставляет различные параметры форматирования для настройки вывода в соответствии с вашими потребностями. Вот пример:

<p>{{ timestamp | date:'medium' }}</p>

В приведенном выше фрагменте кода timestamp— это переменная временной метки Firestore, а medium— параметр формата для канала даты. В формате mediumдата отображается как «МММ д, г ч:мм:сс а» (например, 1 января 2022 г., 00:00:00).

Метод 2. Пользовательское форматирование

Если предопределенные форматы не соответствуют вашим требованиям, вы можете создать свой собственный формат даты, указав желаемый шаблон. Вот пример:

<p>{{ timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</p>

В приведенном выше фрагменте кода yyyy-MM-dd HH:mm:ssпредставляет шаблон для желаемого формата даты (например, 2022-01-01 00:00:00).

Метод 3: Локализация

Angular Date Pipe поддерживает локализацию, позволяя отображать даты на разных языках и в региональных форматах. Вы можете указать локаль в качестве параметра канала данных. Например:

<p>{{ timestamp | date:'medium':'en-US' }}</p>

В приведенном выше фрагменте кода en-USпредставляет языковой стандарт для английского языка (США). Вывод будет отформатирован в соответствии с английским (США) форматом даты.

Метод 4: преобразование часового пояса

Если вам нужно отобразить дату в определенном часовом поясе, вы можете использовать параметр timezoneканала даты. Вот пример:

<p>{{ timestamp | date:'medium':'':'UTC' }}</p>

В приведенном выше фрагменте кода UTC— это идентификатор часового пояса. Вывод будет преобразован в соответствующее время UTC.

Метод 5: Относительное время

Date Pipe в Angular также предоставляет возможность отображать даты в удобном для чтения относительном формате, например «2 минуты назад» или «через 3 дня». Это полезно для отображения временных меток относительно текущего времени. Вот пример:

<p>{{ timestamp | date:'medium':'':'':'en-US':'relative' }}</p>

В приведенном выше фрагменте кода relativeиспользуется в качестве параметра формата для отображения даты в относительном формате.

Заключение

В этой статье мы рассмотрели различные методы форматирования временных меток Firestore с помощью Angular Date Pipe. Мы рассмотрели базовое форматирование, пользовательское форматирование, локализацию, преобразование часового пояса и отображение относительного времени. Используя эти методы, вы можете создавать визуально привлекательные и удобные для пользователя представления дат в приложениях Angular.

Не забудьте обратиться к документации Angular для получения более подробной информации о канале данных и его доступных параметрах. Приятного кодирования!