Манипуляции с датами в JavaScript являются непростой задачей как для новичков, так и для более опытных разработчиков. Библиотека Moment.js позволяет значительно упростить работу JavaScript-программистам.
Moment.js - это проект с открытым исходным кодом, позволяет упростить проверки, синтаксический анализ и обработку дат на стороне клиента. В этом уроке я приведу несколько примеров применения этой полезной JavaScript-библиотеки.
Moment.js избавляет от необходимости использовать родной JavaScript-объект Date напрямую. Библиотека является оболочкой для объекта Date (таким же образом, как jQuery является оболочкой для JavaScript), что позволяет значительно проще работать с объектом.
Проблема объекта Date не функциональность, он чрезвычайно громоздкий при использования разработчиками. Если вы хотите сделать сложный разбор, проверку и отображение даты, вам в конечном итоге придется писать много кода.
Moment.js также расширяет встроенные возможности JavaScript для работы с датами различными функциями, например, относительное время, календарное время, длительность и многоязыковая поддержка. Она также имеет широкий список плагинов, которые выполняют дополнительные функции, такие как поддержка часового пояса, интеграции с Twitter и многие другие.
Для начала вам нужно скачать Moment.js и подключить его в вашем HTML-документе. Вы также можете найти библиотеку на cdnjs.com (CDN для проектов с открытым кодом). Просто воспользуйтесь поиском в библиотеке, используя термин "moment.js".
После того как мы подключили библиотеку Moment.js, нам нужно убедиться, что она работает правильно, для этого мы собираемся создать экземпляр объекта moment и объект JavaScript Date, а затем выведем их значения на экран.
Ниже показано, как ссылаться на библиотеку Moment.js в ваших HTML-документах, а также как создать экземпляр и отображения значений объекта moment и объекта Date.
(0)
<!DOCTYPE html>
<html>
<head>
<!-- ссылка на Moment.js library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Moment Date</h2>
<!-- контейнер для вывода дат при помощи Moment.js -->
<div id="displayMoment"></div>
<h2>JavaScript Date</h2>
<!-- контейнер для вывода дат при помощи JavaScript Date -->
<div id="displayJsDate"></div>
<script type="text/javascript">
(function() {
// экземпляр объекта moment
var NowMoment = moment();
// экземпляр объекта JavaScript Date
var NowDate = new Date();
// вывод значения объекта moment в #displayMoment div
var eDisplayMoment = document.getElementById('displayMoment');
eDisplayMoment.innerHTML = NowMoment;
// вывод значения объекта Date в #displayJsDate div
var eDisplayDate = document.getElementById('displayJsDate');
eDisplayDate.innerHTML = NowDate;
})();
</script>
</body>
</html>
На данный момент, объем кода для обоих объектов одинаков.
Разница между объектом moment и объектом Date быстро становится очевидной, когда мы хотим вывести даже простую, удобочитаемую дату в формате ‘Y-m-d' (например, '2014-7-1').
Использование JavaScript объекта Date:
// Использование JavaScript объекта <em>Date</em> для текущей даты в div (#displayJsDate)
var NowDate = new Date();
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var sDay = NowDate.getDate();
var sMonth = NowDate.getMonth() + 1;
var sYear = NowDate.getFullYear();
var eDisplayDate = document.getElementById('displayJsDate');
eDisplayDate.innerHTML = sYear+'-'+sMonth+'-'+sDay;
Moment.js делает наш код более компактным.
// use Moment.js to display current date in a div (#displayMoment)
var NowMoment = moment();
var eDisplayMoment = document.getElementById('displayMoment');
eDisplayMoment.innerHTML = NowMoment.format('YYYY-M-D');
Обратите внимание, что при использовании Moment.js нам понадобилось всего лишь вызвать функцию format() и передать ей строку 'YYYY-M-D' в качестве аргумента. Строка определяет формат даты, который нам необходим. Сайт Moment.js имеет множество вариантов формата даты, которые удобно перечислены в виде таблицы здесь: http://momentjs.com/docs/#/displaying/format/
Теперь, когда мы познакомились с процессом отображения и форматирования текущей даты, давайте двигаться дальше.
Объект moment принимает строковый параметр и создает объект Date для указанной даты.
<h2>Вывод даты</h2>
<div id="output"></div>
<script type="text/javascript">
(function() {
var Date = moment('July 1, 2014');
var eDisplayMoment = document.getElementById('output');
// вывод даты в нужном формате
eDisplayMoment.innerHTML = Date.format('YYYY-M-D');
})();
</script>
Одна деталь, которую следует отметить, тут нет стандарта, которого браузеры должны придерживаться при разборе даты. К счастью, библиотека Moment.js предоставляет дополнительные параметры, которые позволяют нам указать точный шаблон, чтобы помочь нам избежать несоответствий.
Для соответствия во всех браузерах и платформах, приведенный выше код должен быть проанализирован как указано ниже.
<h2>Ввод даты</h2>
<div id="input">July 1, 2014</div>
<h2>Вывод даты</h2>
<div id="output"></div>
<script type="text/javascript">
(function() {
// получаем дату из #input div element
var input = document.getElementById('input').innerHTML;
// используем функцию moment() с двумя параметрами: датой и шаблоном
var Date = moment(input, 'MMMM D, YYYY');
//вывод преобразованной даты в div (#output)
var eDisplayMoment = document.getElementById('output');
eDisplayMoment.innerHTML = Date.format('YYYY-M-D');
})();
</script>
На сайте Moment.js есть таблица, содержащая доступные параметры, которые можно использовать для обработки дат: http://momentjs.com/docs/#/parsing/string-format/
Хотя даты редко вводят вручную, важно знать что мы на самом деле обрабатываем значение даты.
Рассмотрим ввод '2014-14-14 '- это невозможная дата. В этом случае функция moment() будет возвращать строку 'Invalid Date' при попытке обработать её.
Однако, есть и другие инструменты доступные нам для обнаружения и исправления недействительных значений даты.
Для обнаружения неверных дат Moment.js предоставляет нам метод isValid(). Он возвращает простое булево значение (true или false), что позволяет нам определить следующий порядок действий в логике нашего кода, в случае если значение даты не является допустимым.
Другой метод обнаружения невалидных дат - invalidAt(). Этот метод является более специфичным, он скажет нам, где наш дата является невалидной. Он будет возвращать целое число от 0 до 6, значения которых могут быть найдены в следующей таблице.
| Число | Место ошибки |
| 0 | Years |
| 1 | Months |
| 2 | Days |
| 3 | Hours |
| 4 | Minutes |
| 5 | Seconds |
| 6 | Milliseconds |
Так, в примере '2014-14-14 ', функция invalidAt() вернет 1, потому что 14 является некорректным значением для месяца (только 1-12 валидные значения).
Что делать когда вам необходимо исправить неверную дату? Если вы еще не работали с датами раньше, это может поставить вас в тупик. Однако, Moment.js и здесь нам поможет.
Часто мы просим людей ввести даты и, несмотря на все наши усилия и кричащие всплывающие подсказки с просьбой ввести их в определенном формате, например, "D/M/Y", они игнорируют наши инструкции и вводят "M/D/Y".
Мы можем вернуться к разбору дат, который мы сделали раньше и добавить второй параметр разбора (у вас может их быть больше, чем два варианта), передав в массив строки различных возможных форматов даты в качестве запасного варианта.
Давайте используем дату "1 января 2014" как пример. Мы введем 14/1/2014 и 1/14/2014, а ожидаемый ввод D/M/YYYY.
<h2>Ввод дат</h2>
<div id="input1">14/1/2014</div>
<div id="input2">1/14/2014</div>
<h2>Вывод дат (1 формат)</h2>
<div id="output1"></div>
<div id="output2"></div>
<h2>Вывод (множество форматов)</h2>
<div id="output3"></div>
<div id="output4"></div>
<script type="text/javascript">
(function() {
var correct = document.getElementById('input1').innerHTML;
var incorrect = document.getElementById('input2').innerHTML;
var Date1 = moment(correct, 'D/M/YYYY');
document.getElementById('output1').innerHTML = Date1.format('MMMM D, YYYY');
var Date2 = moment(incorrect, 'D/M/YYYY');
// будет выведено 'Invalid Date' в #output2 потому что формат некорректный
document.getElementById('output2').innerHTML = Date2.format('MMMM D, YYYY');
var Date3 = moment(correct, ['D/M/YYYY','M/D/YYYY']);
document.getElementById('output3').innerHTML = Date3.format('MMMM D, YYYY');
// попробуем обработать дату используя два потенциально возможных формата
var Date4 = moment(incorrect, ['D/M/YYYY','M/D/YYYY']);
// будет выведен правильный формат даты
document.getElementById('output4').innerHTML = Date4.format('MMMM D, YYYY');
})();
</script>
Вы обратили внимание, что при одном строковом аргументе, если формат не совпадает, вы получите "Invalid Date". Однако, если вы передадите массив форматов в качестве аргумента, то первый вариант, который cработает, будет использоваться.
Одна из моих любимых функций в библиотеке Moment.js - это удобные методы для манипуляции с датами, такие как .add() и .subtract().
Например:
// текущая дата
var Date = moment();
// добавляем 7 дней к текущей дате
document.getElementById('currDatePlus7d').innerHTML = Date.add('days', 7);
// вычитаем 8 часов от текущей даты
document.getElementById('currDateSub8h').innerHTML = Date.subtract('hours', 8);
// добавляем 5 лет и 3 месяца к текущей дате
document.getElementById('currDatePlus8h').innerHTML = Date.add({years: 5, months: 3});
Библиотека Moment.js выполняет подобные операции очень корректно. Например, с помощью нативного JavaScript объекта Date, добавив один месяц к 31 августа мы получим 1 октября. Эта же операция, выполняемая Moment.js, будет правильно возвращать 30 сентября.
Moment.js является отличным и полезным инструментом, если вы регулярно работаете с датами на стороне клиента, для обработки, форматирования и проверки дат. Чтобы увидеть исходный код проекта смотрите его репозиторий на GitHub. Чтобы узнать больше о её особенностях, изучите официальную документацию.
Источник© 2008 - 2024 Все права защищены