Фильтрация даты с помощью Moment.js

Что такое Moment.js

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

Это отлично подходит для многих вещей, таких как форматирование, проверка, синтаксический анализ и манипулирование датами в JS. Кто бы мог подумать? Прежде чем мы перейдем к фильтрации дат, давайте попробуем немного форматировать и манипулировать, чтобы понять, как работает Moment (сокращение от Moment.js).

Не забудьте сначала установить библиотеку: Installation docs.

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

Момент отлично подходит для форматирования. Особенно делать свидания удобными для человека. Даты обычно хранятся в таком коде: 1623611461268(с использованием Date.now). Количество миллисекунд, прошедших с 00:00:00 UTC 1 января 1970 года. Это не очень по-человечески. Никакой разумный человек не может отличить дату от этого.

Хотя уже есть несколько методов JS, которые могут преобразовать это в удобную и удобочитаемую дату, вы обнаружите, что Moment намного проще в использовании. Тем более, что вы можете отформатировать дату практически так, как вам нужно.

Давайте сравним встроенный метод с методами Moment.

JavaScript

новая дата

Date Sun Jun 13 2021 14:11:01 GMT-0500 (Central Daylight Time)

Дата.toDateString()

Sun Jun 13 2021

Момент

Новая дата
(иначе известная как новый момент или объект момента)

moment() => Moment / Moment Object

Формат момента (в строку)

moment().format() => 2021-06-13T14:11:01-05:00

На первый взгляд это кажется намного хуже, чем методы сборки в JS, но метод .format() момента очень универсален. Сначала давайте разберем необработанный вывод .format(), прежде чем добавлять в него какие-либо аргументы (или токены).

На выходе получается так называемый формат даты ISO. Как это прочитать:

YYYY-MM-DD T HH-MM-SS - UTC Offset

Помните, ранее JS сообщил нам, что часовой пояс моего компьютера (Central Daylight Time), то есть -05:00 UTC.

Знание того, как он отформатирован, не делает его более удобным для человека. Итак, давайте приступим к тому, чтобы сделать его удобным для человека. Я буду использовать несколько встроенных токенов (или аргументов) локализации для .format() и создам собственный, используя аналогичные токены и мои собственные разделители.

Локализованные форматы

Время:

moment().format('LT') => 2:11 PM

Время в секундах:

moment().format('LTS') => 2:11:01 PM

Название месяца, дня, года:

moment().format('LL') => June 13, 2021

Название месяца, дня, года, времени:

moment().format('LLL') =>  June 13, 2021 2:11 PM

Мой пользовательский формат

moment().format('[Today is the ]DDDo[ day in the ]wo[ week of the year ]YYYY')
Output: Today is the 164th day in the 25th week of the year 2021

Токены DDDo, wo и YYYY с разделителями в квадратных скобках. Весь аргумент должен быть строкой, включая квадратные скобки без escape-символов.

Объяснение используемых токенов и список всех доступных токенов и локалей см. в Документации Moments. Вы даже можете отформатировать даты моментов, чтобы они отображались как XX seconds|minutes|hours ago, используя .fromNow().

Манипуляции

Фильтрация дат требует некоторых манипуляций с датами, поэтому давайте рассмотрим 2 быстрых способа манипулирования датами моментов (или объектов моментов).

Добавление

Добавление документов.
Также есть все доступные ключи и их расшифровка.

Поскольку у нас уже есть сегодняшняя дата, давайте добавим к ней год, чтобы увидеть, какой это будет день недели.

moment().add(1, 'year').format('dddd') => Monday

Если мы проверим календарь на 13 июня 2022 года, то увидим, что на самом деле это понедельник.

Вычитание

Продолжая тему проверки дня недели в предыдущем году, давайте посмотрим, какой сегодня день недели был в прошлом году.

moment().subtract(1, 'year').format('dddd') => Saturday

Мы можем еще раз проверить календарь на 13 июня 2020 года и увидеть, что это была суббота.

Важное примечание о манипулировании датами

Все объекты Moments/Moment имеют эти доступные им методы, поэтому можно сохранить текущую дату в переменной как момент и повторно использовать ее несколько раз в коде и форматировать ее разными способами, не создавая новый момент. Однако когда дело доходит до манипулирования, вы меняете дату исходного моментального объекта. Следовательно, вы хотели бы создать новый момент для проведения любых манипуляций, чтобы не изменить никаких ссылок на исходный Момент сегодняшней даты.

Фильтрация (проверка)

Есть несколько способов проверить или отфильтровать даты с помощью Moments. Я буду использовать метод .isBetween() для этой демонстрации. Также есть .isBefore(), .isAfter() и многие другие. Прочтите документацию запроса, чтобы узнать больше об этих методах и многом другом.

Пул данных:

const data = [
  moment(),
  moment().add(1, 'days'),
  moment().subtract(1, 'days'),
  moment().add(1, 'months'),
  moment().subtract(1, 'months'),
  moment().add(1, 'years'),
  moment().subtract(1, 'years'),
];

Я сделал 7 мгновений. Давайте создадим фильтр, который будет определять, произошел ли Момент в этом году, и соответствующим образом войдем в консоль.

Для простоты я использую оператор else-if при отображении массива данных. В практическом приложении вы можете захотеть создать функцию, которая принимает каждый отображаемый момент и соответствующим образом фильтрует его. Например, отфильтровать их в объект по соответствующему месяцу (январь, февраль, март, …).

data.map((currentMoment) => {
  const thisYearStart = moment().startOf('year');
  const thisYearEnd = moment().endOf('year');
if (currentMoment.isBetween(thisYearStart, thisYearEnd)) {
    console.info(currentMoment.format('ll'), ' was in the year 2021');
  } else {
    console.warn(currentMoment.format('ll'), ' was not the year 2021');
  }
});

Документация для .startOf() и .endOf().
Эти функции действуют аналогично сложению и вычитанию, только изменяют дату на start of (первый час, минута, секунда 00:00:00/00:00:00) и end of (последний час, минута, секунда 23:59:59/23:59:59) дня, недели, месяца, года и т. д. Это быстрее, чем установка дат.

Мы можем проверить журналы консоли, чтобы убедиться, что этот фильтр работает.

Вывод

Хотя на первый взгляд это кажется бесполезным, представьте, что вы обрабатываете транзакции, счета-фактуры и покупки/расходы для бизнеса или собственного бизнеса. Теперь вы знаете, как фильтровать и сортировать их для более удобного анализа позже, например, для просмотра всех определенных элементов в данном году, месяце, дне или неделе. Момент также обрабатывает четверти.