В этой статье вы изучите работу с JavaScript библиотекой Moment.js, которая нужна для более простой работе со временем.
Но перед тем как читать эту, рекомендую прочитать статью о том,
Как сделать обратный отчёт времени на JavaScript, в ней мы работает со стандартными средствам JS, для работы с временем.
Как установить Moment.js:
Перед тем как работать с любой библиотекой, нужно её установить, Moment.js можно установить множеством способов, но я покажу только два.
Скачать файл:
Для того что бы скачать файл, переходим на официальный сайт, и видим такую кнопку.
Нажимаем на то что ниже, с надписью «momen.min.js», вы переходите по ссылки и должны увидеть это.
Что бы вам получить этот код, вам не надо весь его копировать, достаточно нажать Ctrl-S, выбрать куда скачать и подключить файл во ваш проект.
1 | <script src="libs/moment.min.js"></script> |
На этом установка закончена.
NPM:
Через npm совсем просто, вам надо только ввести этот код.
1 | npm install moment --save |
То есть всё, но можно установить и через другие менеджеров пакетов, вот они все.
1 2 3 4 5 | yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) |
На этом с установкой всё.
Работа с Moment.js:
Для показа работы с этой библиотеки, я покажу два примера.
Пример 1:
В первом примере я покажу как брать настоящие время и выводить его в разных форматах, для этого в HTML создам не большой блог куда буду выводить время.
1 | <div class="time"></div> |
Это просто обычный блок <div>
с классом time
.
1 2 3 4 | // Берём блок let timeBlock = document.querySelector(".time"); // Выводим настоящие время timeBlock.innerHTML = moment() |
Вот результат.
То есть, что бы получить настоящие время, надо просто объявить moment()
, но как вы заметили формат крайне не удобен, что бы изменить формат, нужно использовать функцию .format()
.
1 | timeBlock.innerHTML = moment().format('YYYY MMMM DD'); |
Внутри этой функции .format()
, пишется формат выводимых данных или как должны выводится данные, вот результат.
Как видите, теперь всё понятнее, сначала выводит год, потом название месяца и день, более подробнее можете посмотреть в документации.
Пример 2:
Во втором примере назначен определённую дату и будим её менять и выводить, вот код.
1 2 3 | let timeBlock = document.querySelector(".time"); let time = moment("2015-09-01"); timeBlock.innerHTML = time.format('YYYY MMMM DD'); |
Тут не чего особо не изменилось, только добавили отдельную переменную для хранения времени и присвоили значение первого сентября 2015 года, вот результат.
Как видите всё нормально вывелось, но теперь с помощью функции .add()
, увеличим время на один год.
1 2 | time.add(1, "years") timeBlock.innerHTML = time.format('YYYY MMMM DD'); |
Первый параметр этой функции, это на сколько надо увеличить, а второй, что нужно увеличить, в нашем случае увеличиваем на год.
Вывод:
В этой статье вы прочитаете не большой обзор и как работать с библиотекой Moment.js для работы с времени.
Также если понравилась библиотека, то посмотрите её документацию.