Работа с датой и временем с помощью Moment.js

Работа с датой и временем зачастую весьма обременительна. Я всегда считал, что отдельная JavaScript библиотека для манипуляции датами была бы очень полезной. Не так давно я познакомился с замечательной библиотекой Moment.js, позволяющей валидировать, парсить и управлять датами и временем.

Начинаем работу с Moment.js

Чтобы использовать Moment.js в браузере, скачайте скрипт и подключите его на странице с помощью тега script, как показано в следующем примере. Moment.js определяет глобальный объект moment, который может быть использован для доступа ко всему функционалу парсинга и манипуляции.

<html>
  <head>
    <script src="moment.js"></script>
    <script>
      moment().format();
    </script>
  </head>
  <body>
  </body>
</html>

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

Ранее я конвертировал строки с датам в объекты Date, выбирая из него индивидуальные составляющие, и собирая их в единую строку. Moment.js упростил процесс конвертации дат в любой необходимый формат. Конвертация дат в различные форматы довольно проста, это показано в следующем примере:

moment().format('YYYY MM DD');

moment() возвращает текущую дату и время, а format() конвертирует текущую дату и время в указанный формат. В данном примере дата содержит четырехсимвольный год, двухсимвольный месяц, и двухсимвольный день месяца, все разделено пробелами. Код в действии можно посмотреть на следующей демо-странице.

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

Еще одну раздражающую задачу можно упростить с помощью Moment.js - задачу валидации дат. Чтобы проверить на правильность даты, просто передайте строку с датой вместе с форматом в объект moment, и вызовите метод isValid(). Этот метод возвращает true если дата верна, и false в противном случае. Ниже показан пример проверки, также можно просмотреть соответствующее демо.

var dateEntered = $('#txtEnteredDate').val();

if (!moment(dateEntered,'MM-DD-YYYY').isValid()) {
  console.log('Invalid Date');
} else {
  console.log('Valid Date');
}

В объекте, возвращенном функцией moment() есть ряд полезных флагов:

  • overflow - устанавливается, если возникло переполнение. Например, если указан 13 месяц или 32 день месяца.
  • invalidMonth - устанавливается, если передан неверный месяц.
  • empty - устанавливается, если переданная строка не содержит дату, которую можно разобрать
  • nillInput - устанавливается, когда передан null

Манипулирование датами

Существует ряд возможностей управления объектом moment. Например, вы можете прибавлять или вычитать дни, месяцы, года, и т.д. Это можно сделать с помощью методов add() и subtract(). Следующий пример показывает, как можно прибавить к дате семь дней, месяцев или недель.

moment().add('days', 7);	// прибавляет к текущей дате 7 дней
moment().add('months', 7);  // прибавляет текущей дате 7 месяцев
moment().add('years', 7);   // прибавляет к текущей дате 7 лет

То же самое с методом subtract():

moment().subtract('days', 7);   // вычитает из текущей даты 7 дней
moment().subtract('months', 7); // вычитает 7 месяцев из текущей даты
moment().subtract('years', 7);  // вычитает 7 лет из текущей даты

Сколько прошло времени с текущего момента

Еще одной распространенной задачей является определение количества времени, которое прошло между двумя датами. Для расчета разницы с текущей датой в Moment.js есть метод fromNow(). Вот простой пример, который проверит, сколько прошло времени с текущего момента:

moment().fromNow();

Этот пример выведет “a fiew seconds ago” (несколько секунд назад). Если передать дату в объект moment, пример выведет, сколько прошло времени между текущей и указанной датой. Например, следующий код выведет “7 days ago” (7 дней назад)

var dateA = moment().subtract('days', 7);
dateA.fromNow();

Сколько времени прошло между двумя произвольными датами

Метод fromNow() используется для сравнения указанной даты с текущим временем. Это всего лишь особый случай метода from(), который сравнивает две произвольные даты. Ниже показан пример использования метода from(). Этот код выведет “in a day” (“в течении дня”). Код в действии можно посмотреть на демо-странице.

var dateB = moment('2014-12-12');
var dateC = moment('2014-12-11');

console.log(dateB.from(dateC));

Вычисляем разницу между двумя датами

Moment.js предоставляет возможность вычисления разницы между двумя датами. ПО умолчанию разница считается в миллисекундах, но также может быть возвращена в днях, месяцах, годах и прочее. Для вычисления разницы воспользуйтесь методом diff(). Первым аргументом он принимает дату. Размерность промежутка может быть указана вторым аргументом. Если он не указан, то по умолчанию используются миллисекунды. Следующий пример и демо показывают использование метода diff().

var dateB = moment('2014-11-11');
var dateC = moment('2014-10-11');

console.log('Разница в ', dateB.diff(dateC), 'миллисекунд');
console.log('Разница в ', dateB.diff(dateC, 'days'), 'дней');
console.log('Разница в ', dateB.diff(dateC, 'months'), 'месяцев');

Сравнение дат

Moment.js также предоставляет методы для сравнения дат - isBefore(), isAfter() и isSame(). Соответственно своим названиям, они возвращают булево значение, если одна из дат была до, после, или же они равны. Пример использования isAfter() показан ниже.

console.log(moment('2010-09-20').isAfter('2010-10-19')); // возвращает false
console.log(moment('2010-11-20').isAfter('2010-10-19')); // возвращает true

Поддержка интернационализации

Moment.js также предоставляет ряд возможностей для поддержки других языков. Вы можете указать используемый язык глобально, или же для конкретного объекта moment. По умолчанию, Moment.js поддерживает английский язык. Если вам нужна поддержка другого языка, то нужно указать соответствующие значения в объекте настройки в moment.lang. Следующий пример, взятый из документации к Moment.js, как добавить поддержку французского языка.

moment.lang('fr', {
  months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
  monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
  weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
  weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
  weekdaysMin: 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
  longDateFormat: {
    LT: 'HH:mm',
    L: 'DD/MM/YYYY',
    LL: 'D MMMM YYYY',
    LLL: 'D MMMM YYYY LT',
    LLLL: 'dddd D MMMM YYYY LT'
  },
  calendar: {
    sameDay: '[Aujourdhui à] LT',
    nextDay: '[Demain à] LT',
    nextWeek: 'dddd [à] LT',
    lastDay: '[Hier à] LT',
    lastWeek: 'dddd [dernier à] LT',
    sameElse: 'L'
  },
  relativeTime: {
    future: 'dans %s',
    past: 'il y a %s',
    s: 'quelques secondes',
    m: 'une minute',
    mm: '%d minutes',
    h: 'une heure',
    hh: '%d heures',
    d: 'un jour',
    dd: '%d jours',
    M: 'un mois',
    MM: '%d mois',
    y: 'une année',
    yy: '%d années'
  },
  ordinal: function (number) {
    return number + (number === 1 ? 'er' : 'ème');
  },
  week: {
    dow: 1, // Понедельник - первый день недели.
    doy: 4 // Неделя, которая содержит 4 января - первая неделя года.
  }
});

moment.lang('fr');
console.log(moment(1316116057189).fromNow()); // il y a une heure
moment.lang('en');
console.log(moment(1316116057189).fromNow()); // an hour ago

Вот демонстрация приведенного кода.

Заключение

Moment.js - замечательная библиотека, упрощающая манипуляцию и валидацию дат и времени. Эта библиотека упрощает работу разработчикам приложений. В этой статье мы показали некоторые особенности библиотеки Moment.js, которые помогают в парсинге, валидации и манипуляции объектами даты/времени в браузере и приложениях Node.js. Для Moment.js также доступен ряд полезных плагинов, как ISO Calendar, Jalaali Calendar, и многих других, доступных на официальной странице плагина. Чтобы узнать о Moment.js больше, рекомендую обратиться к официальной документации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/managing-dates-times-using-moment-js/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 73472
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^