Использование в Angular

Для работы с Moment.js в Angular рекомендуется использовать пакет moment, который устанавливается через npm:

npm install moment --save

После установки библиотеку можно импортировать в нужные компоненты или сервисы:

import * as moment from 'moment';

Важно использовать типы TypeScript для Moment.js. Для этого устанавливают дополнительные типы:

npm install @types/moment --save-dev

Использование типизации позволяет автокомплешн в редакторе и обеспечивает строгую проверку типов.

Создание и форматирование дат

Создание объекта Moment осуществляется несколькими способами:

// Текущая дата и время
const now = moment();

// Конкретная дата
const specificDate = moment('2026-05-22', 'YYYY-MM-DD');

// Создание с объектом
const dateObj = moment({ year: 2026, month: 4, day: 22 }); // месяц начинается с 0

Форматирование дат выполняется через метод format():

const formatted = now.format('YYYY-MM-DD HH:mm:ss');

Ключевые параметры форматирования:

  • YYYY – полный год
  • MM – месяц с ведущим нулём
  • DD – день месяца
  • HH – часы 24-часового формата
  • mm – минуты
  • ss – секунды

Использование форматирования облегчает интеграцию дат в шаблоны Angular с помощью привязки данных.

Локализация и работа с языками

Moment.js поддерживает различные языки. Для Angular важно корректно установить локаль:

import 'moment/locale/ru';

moment.locale('ru');

const dateInRussian = moment().format('LLLL');

Метод locale() изменяет локаль глобально для всего приложения. Для компонентов можно применять временные локали с помощью locale() на отдельном объекте Moment:

const englishDate = moment().locale('en').format('LLLL');

Манипуляции с датами

Moment.js предоставляет удобные методы для арифметики с датами:

const today = moment();
const nextWeek = today.clone().add(7, 'days');
const lastMonth = today.clone().subtract(1, 'months');

Ключевые единицы измерения времени:

  • years, months, weeks, days, hours, minutes, seconds, milliseconds

Метод clone() необходим для сохранения оригинального объекта без изменения его состояния, что особенно важно при работе с Angular, где объекты часто передаются между компонентами.

Сравнение и проверка дат

Для проверки и сравнения Moment.js предлагает методы:

const start = moment('2026-05-01');
const end = moment('2026-05-31');

const isAfter = end.isAfter(start); // true
const isBefore = start.isBefore(end); // true
const isSame = start.isSame(moment('2026-05-01')); // true

Методы isBetween(), isSameOrAfter(), isSameOrBefore() позволяют гибко проверять диапазоны дат.

Работа с временем в Angular формах

В Angular формы часто используют два направления работы с датами:

  1. Отображение даты в форме Форматирование для input-полей:
this.form.patchValue({
  date: moment(this.model.date).format('YYYY-MM-DD')
});
  1. Парсинг введённой даты Конвертация строки из формы обратно в объект Moment:
const dateFromForm = moment(this.form.value.date, 'YYYY-MM-DD');

Такой подход обеспечивает корректную работу с датами и временем без ошибок преобразования.

Работа с временными зонами

Для работы с часовыми поясами используется библиотека moment-timezone:

npm install moment-timezone --save

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

import * as moment from 'moment-timezone';

const nyTime = moment.tz('2026-05-22 12:00', 'America/New_York');
const moscowTime = nyTime.clone().tz('Europe/Moscow');

Это позволяет в Angular-приложениях отображать время для разных регионов без потери точности.

Интеграция с Angular Pipes

Для упрощения форматирования в шаблонах можно создать кастомный pipe:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'momentFormat' })
export class MomentFormatPipe implements PipeTransform {
  transform(value: string | Date, format: string = 'LL'): string {
    return moment(value).format(format);
  }
}

Использование в шаблоне:

<p>{{ user.birthDate | momentFormat:'DD MMMM YYYY' }}</p>

Такой подход делает отображение дат удобным и повторно используемым в любом компоненте Angular.

Валидация дат

Moment.js позволяет легко проверять корректность введённых данных:

const invalidDate = moment('2026-02-30', 'YYYY-MM-DD', true);
console.log(invalidDate.isValid()); // false

Третий параметр true включает строгую проверку формата. Это особенно полезно при работе с пользовательскими формами в Angular.

Сравнение с нативным Date

Moment.js упрощает работу с датами по сравнению с объектом Date:

  • Простое форматирование без манипуляций с методами getMonth(), getFullYear().
  • Лёгкая локализация и отображение на любом языке.
  • Поддержка удобных методов арифметики и проверки диапазонов.
  • Снижение ошибок при парсинге строковых дат из форм.

В Angular это критически важно для построения динамических и международных приложений, где управление датами должно быть точным и гибким.

Оглавление