Moment.js: лучшая библиотека даты для JavaScript

Автор оригинала: Scott Robinson.

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

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

Даты разборки

Строки

По умолчанию, момент пытается проанализировать строки даты, используя ISO 8601 Формат, который имеет широкий спектр действительных дат. Вы можете указать как можно меньше или столько же, точность времени, сколько вы хотите в своем дате время использования этого формата. Это отлично подходит для нас, так как даты могут принимать много разных форм, в зависимости от уровня деталей, которые вы хотите указать.

Учитывая попытки анализировать все эти разные форматы самостоятельно:

20160628
2016-06-28T09.
20160628T080910,123.
2016-06-28 09: 30: 26.123
2016-06-28 09: 30: 26.123 + 07: 00

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

Во-первых, самый простой способ создать момент Объект состоит в том, чтобы вызвать конструктор без аргументов:

> const moment = require('moment');
> let m = moment();

Это создаст экземпляр объекта даты с текущим временем.

Чтобы разбирать строку даты с моментом, просто пропустите его к конструктору:

> let date = moment('2016-06-28 09:30:26.123');

Если по какой-то момент момент не способен разбирать строку, которую вы его дали, то она отступит к использованию встроенного Новая дата () объект для анализа.

Чтобы проверить, был ли ваша дата проанализирована и действительна, используйте .isvalid () Метод:

> moment('2016-06-28 09:30:26.123').isValid();
true
> moment('derp').isValid();
false

Для всех объектов даты, созданные с моментом, независимо от того, как вы их анализируете или создаете их, часовой пояс в объекте будет по умолчанию на текущий часовой пояс, если не указан напрямую. Чтобы получить UTC Times назад, используйте moment.UTC () вместо. Для получения дополнительной информации о зонах времени проверьте раздел Моментальные часовые пояса Отказ

Указание форматов

Одна из моих любимых функций разборки в момент – это анализатор строки/формата. Это в основном, как форма обратной струны. Вы предоставляете проаналируют строку даты для анализа и Другая строка, которая указывает формат, в котором он находится. Таким образом, вы можете использовать строки любого формата, который вы хотите, и все же комфортно используйте их с моментом.

Например, в США (по какой-то причине) мы хотели бы отформатировать наши даты как «месяц/день/год», тогда как большая часть остальной части мира форматирует их как «день/месяц/год». Это оставляет много места для путаницы. Например, дата «11/06/2016» должна быть 6 ноября или 11 июня?

Изображение: Джон Хардинг/Мона Чалаби через Хранитель

Итак, как мы узнаем, если ваши даты проанализированы правильно? Использование формата Спецификаторы, подобные это гарантируют, что в ваших датах нет, в ваших датах нет, предполагая, что вы знаете заранее, в каком формате они входятся. В следующем примере мы все еще можем разобрать правильные даты, несмотря на разные, и потенциально запутанные форматы.

> let d1 = moment('11.06.2016', 'DD-MM-YYYY');
> let d2 = moment('06/11/2016', 'MM-DD-YYYY');

> d1.format();    // '2016-06-11T00:00:00-05:00'
> d2.format();    // '2016-06-11T00:00:00-05:00'

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

Для полного набора имеющихся токенов форматирования проверить Этот раздел Moment.js Документы Отказ

Timestamps Unix

По мере того, как вы ожидаете, момент также способен анализировать целочисленные даты ( Unix Time ), а в формате секунды или миллисекунды:

> moment.unix(1467128085);      // Date in seconds from 1970
> moment(1467128085747);        // Date in milliseconds from 1970

Единственное отличие в результате времени является точность. Milliseconddate будет иметь ненулевое значение для миллисекундного поля.

Типовые даты

На мой взгляд, это одна из более полезных частей момента, в основном потому, что встроенный JavaScript Дата Объект не имеет очень хорошей поддержки для этого. Удивительно, что единственный встроенный способ сделать форматирование с Дата это использовать Date.tolocaledatestring () Метод, который чувствует себя довольно неуклюжему и не так гибко:

> let d = new Date(1467128085747);
> let options = {
...    weekday: 'long', year: 'numeric', month: 'short',
...    day: 'numeric', hour: '2-digit', minute: '2-digit'
... };

> date.toLocaleTimeString('en-us', options);
'Tuesday, Jun 28, 2016, 10:34 AM'

С моментом мы можем легко добиться этого же форматирования только с одной строкой кода (которая я покажу в следующем разделе).

Мы нарушим это в несколько подразделений. Во-первых, мы перейдем к традиционному форматированию с токенами, то мы покажем доступные форматы относительной даты (например, «18 минут назад»), и, наконец, мы покажем, как отформатировать даты как разные виды структурированных данных, как массивы, JSON или простой JavaScript Объект Отказ

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

Используйте .Format () Способ отображения даты в виде строки. Без каких-либо аргументов он печатает строку в представлении ISO 8601:

> let date = moment.unix(1467128085);
> date.format();
'2016-06-28T10:34:45-05:00'

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

> date.format('dddd, MMMM Do YYYY, h:mm a');
'Tuesday, June 28th 2016, 10:34 am'

Вы можете заметить, что это одно и то же представление, что и Date.tolocaletimestring () Пример сверху, но в одной строке. И все это заняло, было строка «DDDD, MMMM DO YYYY, H: MM A».

Опять же Полный список форматированных токенов Может быть найден в момент очень тщательной документации.

Относительные форматы

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

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

Вне коробки вы получаете несколько разных вариантов:

Время от сейчас

Предполагая, что сегодняшняя дата – 1 июля 2016 года, вы получите следующее относительное форматирование:

> moment({year: 2016, month: 3, day: 13, hour: 10}).fromNow();
'3 months ago'
> moment({year: 2016, month: 9, day: 23, hour: 10}).fromNow();
'in 4 months'

Вы можете при желании пройти Логический к .FROMNow () Рассказывание о том, включают или нет включать в строку «назад» (или «в») в форматировании. Таким образом, вы все еще можете легко настроить относительную строку, если это необходимо.

> moment({year: 2016, month: 3, day: 13, hour: 10}).fromNow(true);
'3 months'

Время от даты

> let may = moment({year: 2016, month: 5, day: 3});
> let october = moment({year: 2016, month: 10, day: 9});
>
> may.from(october);
'5 months ago'
> october.from(may);
'in 5 months'

Время до сих пор

> moment({year: 2016, month: 3, day: 13, hour: 10}).toNow();
'in 3 months'
> moment({year: 2016, month: 9, day: 23, hour: 10}).toNow();
'4 months ago'

Время на сегодняшний день

> let may = moment({year: 2016, month: 5, day: 3});
> let october = moment({year: 2016, month: 10, day: 9});
> may.to(october)
'in 5 months'
> 
> october.to(may)
'5 months ago'

Возможно, вы заметили, что как «от», так и «к» методам могут быть взаимозаменены, в зависимости от того, какие даты передаются в аргументе. Это все относительно.

Структурированная дата времени

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

Todate () : Возвращает дату момента в качестве JavaScript Дата
Toarriay () : Возвращает данные даты как массив – [2016, 5, 28, 10, 34, 45, 747]
Tojson () : Возвращает дату даты ISO, отрегулированную в UTC – «2016-06-28T15: 34: 45.747Z»
ToisoString () : Возвращает дату даты ISO, отрегулированную в UTC – «2016-06-28T15: 34: 45.747Z»
Toobject () : Возвращает простой JavaScript Объект с дата данных – {лет: 2016, месяцы: 5, дата: 28 часов: 10 минут: 10 минут: 34, секунд: 45, миллисекунды: 747}
TOSTRING () : Возвращает форматированную строку, аналогичную Date.tostring () – “Вт июня 2016 10:34:45 GMT-0500”

Манипулируя даты

Способность манипулировать датами также важна для многих приложений. И это не так просто, как и ваша нормальная арифметика – манипулирует даты трудно. Можете ли вы легко выяснить эти дополнения/вычитания? Это не легкая задача для программирования.

21 февраля + 13 недель
3:14 утра + 424 минуты
1 июля – 1899400140 миллисекунд

Теперь, что если это скачок года? Или год с Скакать второй ? Счастливо для вас, вам не нужно выбирать это самостоятельно. Момент уже имеет для вас.

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

Добавление/вычитание

Используйте номер/строку или объект для манипулирования датой:

> moment().add(7, 'days');
> moment().subtract({days:13, months:3});

Цепочка также хорошо работает:

> moment().add({hours: 7}).subtract(13, 'minutes');

Начало/конец времени

Эти удобные методы устанавливают дату/время до конца данного единицы времени. Например, если у вас есть дата с 2:15, но вам нужно, чтобы это было начало дня, вы бы использовали:

> moment().startOf('day');

Это установит время до 12:00 в один и тот же день. То же самое работы на год, месяц, час и многое другое.

> moment().endOf('year');   // sets date to 12-31-2016 23:59:59.999

Я обнаружил, что это очень полезно в приложениях отчетности, где пользователи могут выбрать временные рамки для отчетов, таких как Google Analytics. Для того чтобы получить правильные данные, вам необходимо иметь правильный диапазон.

Моментальные часовые пояса

Момент поддерживает установку смещений часового пояса из коробки, но если вам нужна поддержка лучшего часового пояса, то вы должны рассмотреть возможность использования TimeZone Moment Отказ

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

Чтобы использовать его, установите с NPM и требуется () Это на месте момент :

> const moment = require('moment-timezone');

С более чем 550 идентификаторами часового пояса вы можете разделить спецификаторы часового пояса по различным региональным категориям и именам:

Имя часового пояса: США/Центральная, США/Восточная, США/гора и т. Д.
Город: Америка/Чикаго, Америка/Los_Angeles, Азия/Дубай, Австралия/Сидней и т. Д.
GMT Offset: etc/gmt + 6, etc/gmt-2, etc/gmt0 и т.д.

Для полного списка идентификаторов часового пояса вы можете увидеть полный список имен, выполнив:

> const moment = require('moment-timezone');
> moment.tz.names()

Чтобы использовать эти идентификаторы для установки времени и часового пояса с .tz () Метод:

> moment.tz({year: 2016, month: 6, day: 30, hour: 11}, 'America/Los_Angeles').format();
'2016-07-30T11:00:00-07:00'
> moment.tz({year: 2016, month: 6, day: 30, hour: 11}, 'America/Chicago').format();
'2016-07-30T11:00:00-05:00'

Заключение

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

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

Какие другие особенности момента вы часто используете часто? Дайте нам знать об этом в комментариях!