Отображение дат в интерфейсе

Moment.js является одной из наиболее популярных библиотек для работы с датами и временем в JavaScript. Она обеспечивает удобное создание, парсинг, форматирование и манипуляцию датами, что особенно важно при отображении информации в пользовательских интерфейсах. Библиотека позволяет унифицировать работу с датами вне зависимости от браузера и локали пользователя.

Создание объектов даты

Объекты Moment.js создаются с помощью функции moment(). Существует несколько способов инициализации:

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

// С указанием конкретной даты
const specificDate = moment("2026-05-22");

// С указанием даты и времени в формате ISO
const isoDate = moment("2026-05-22T14:30:00");

// С массивом [год, месяц, день, часы, минуты, секунды]
const arrayDate = moment([2026, 4, 22, 14, 30, 0]); // Месяцы считаются с 0

Важно: месяцы в массиве считаются от 0 до 11, что является распространённым источником ошибок.

Форматирование дат

Форматирование является ключевым при выводе дат в интерфейсе. Moment.js использует метод format(), который принимает строку шаблона:

const date = moment("2026-05-22T14:30:00");

// Форматирование даты
date.format("YYYY-MM-DD"); // "2026-05-22"
date.format("DD/MM/YYYY"); // "22/05/2026"
date.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Friday, May 22nd 2026, 2:30:00 pm"

Основные шаблоны:

  • YYYY — год в 4 цифры
  • MM — месяц с ведущим нулем
  • DD — день месяца с ведущим нулем
  • dddd — название дня недели
  • MMMM — полное название месяца
  • Do — день месяца с суффиксом (1st, 2nd)
  • h, hh — часы в 12-часовом формате
  • H, HH — часы в 24-часовом формате
  • mm — минуты
  • ss — секунды
  • a — am/pm

Локализация дат

Для отображения дат на разных языках Moment.js поддерживает локали. Локаль можно установить через moment.locale():

moment.locale('ru'); // Установка русской локали

const date = moment();
date.format('LLLL'); // "пятница, 22 мая 2026 г., 14:30"

При локализации автоматически меняется формат даты, названия дней недели и месяцев, а также суффиксы чисел.

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

Для интерфейсов с пользователями из разных стран важна поддержка временных зон. Moment.js совместно с Moment Timezone позволяет конвертировать время:

const date = moment.tz("2026-05-22 14:30", "Europe/Moscow");
date.format('YYYY-MM-DD HH:mm z'); // "2026-05-22 14:30 MSK"

const nyTime = date.clone().tz("America/New_York");
nyTime.format('YYYY-MM-DD HH:mm z'); // "2026-05-22 07:30 EDT"

Использование .clone() предотвращает изменение исходного объекта даты.

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

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

const date = moment("2026-05-22");

// Добавление дней, месяцев, лет
date.add(7, 'days'); // 2026-05-29
date.add(1, 'months'); // 2026-06-29
date.add(2, 'years'); // 2028-06-29

// Вычитание
date.subtract(3, 'days'); // 2028-06-26

Допустимые единицы измерения: years, months, weeks, days, hours, minutes, seconds.

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

Для отображения информации в интерфейсе часто требуется проверка порядка дат:

const start = moment("2026-05-22");
const end = moment("2026-06-01");

start.isBefore(end); // true
start.isAfter(end);  // false
start.isSame("2026-05-22", 'day'); // true

Метод isSame может принимать вторым аргументом единицу измерения (year, month, day, hour и т.д.), что позволяет сравнивать даты с нужной точностью.

Отображение относительного времени

Moment.js позволяет легко выводить дату в виде “относительного времени”, что полезно для новостных лент и уведомлений:

const now = moment();
const past = moment("2026-05-20");

past.fromNow(); // "2 дня назад"
now.to(past);   // "через 2 дня"

Методы fromNow() и to() автоматически подбирают правильные формы и единицы времени.

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

Иногда данные приходят в нестандартных форматах. Moment.js позволяет задать собственный шаблон при создании даты:

const date = moment("22-05-2026 14:30", "DD-MM-YYYY HH:mm");
date.format("YYYY/MM/DD HH:mm"); // "2026/05/22 14:30"

Это важно при интеграции с серверными API, которые могут использовать различные форматы.

Использование в интерфейсе

При разработке интерфейсов Moment.js помогает:

  • Форматировать даты для отображения в таблицах, списках и календарях.
  • Показывать локализованное и удобное пользователю время.
  • Отображать динамические сообщения вроде “2 минуты назад”.
  • Поддерживать корректное отображение при смене временной зоны.
  • Производить вычисления даты для планирования событий, дедлайнов и напоминаний.

Moment.js обеспечивает комплексное решение для работы с датами, исключая большинство проблем с нативным объектом Date, включая парсинг, локализацию и манипуляции.

Оглавление