Moment.js — это фантастическая библиотека для эффективного управления датой и временем в приложениях React.

Управление датами и временем в React может стать проблемой для тех, кто не знаком с этой областью. К счастью, есть несколько библиотек, которые могут помочь вам с управлением датой и временем в React. Одной из таких библиотек является Moment.js.

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

Установка библиотеки Moment.js

Момент.js библиотека - это пакет для управления операциями даты и времени в JavaScript. Установка библиотеки Moment.js — это первый шаг в использовании Moment.js в вашем приложении React. Вы можете сделать это, выполнив следующую команду в своем терминале:

момент установки npm

После завершения установки вы можете использовать Moment.js в своем компоненте React.

Использование Moment.js для отображения даты и времени

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

instagram viewer 
Импортировать Реагировать от«реагировать»;
Импортировать момент от'момент';
функцияПриложение() {


константа дата = момент (). формат ("ММММ ДД ГГГГ");
константа время = момент (). Формат ("ЧЧ мм сс");


возвращаться (




 Сегоднядата {дата} 


 Время { время } </p>
 </div>
 )
}


экспортпо умолчанию Приложение

момент() метод создает новый объект момента, который представляет определенный момент времени. формат() метод форматирует объект момента в строковое представление.

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

Некоторые из этих специальных символов:

  • ГГГГ: год с четырьмя цифрами
  • ГГ: год с двумя цифрами
  • мм: Месяц с двумя цифрами
  • М: Месяц с одной или двумя цифрами
  • ММММ: Месяц прописью
  • ДД: День месяца с двумя цифрами
  • Д: День месяца с одной или двумя цифрами
  • Делать: День месяца с порядковым номером
  • ЧЧ: Часы с двумя цифрами
  • ЧАС: Часы с одной или двумя цифрами
  • мм: минуты с двумя цифрами
  • м: минуты с одной или двумя цифрами
  • SS: Секунда с двумя цифрами
  • с: Секунда с одной или двумя цифрами

Когда Приложение компонент в предыдущем блоке кода визуализируется, текущая дата и время отображаются в указанном формате на экране.

момент() метод может принимать строковый аргумент даты или времени. Когда момент() имеет строковый аргумент даты или времени, он создает объект момента, представляющий эту дату или время. Строка может быть в различных форматах, таких как ISO 8601, RFC 2822 или отметка времени Unix.

Например:

константа дата = момент ('1998-06-23').формат("ММММ ДД ГГГГ");

Использование Moment.js для управления датой и временем

Библиотека Moment.js также предоставляет несколько методов для управления датами и временем. Эти методы позволяют добавлять или вычитать временные интервалы, задавать определенные значения для компонентов даты и времени и выполнять другие применимые операции.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать момент от'момент';
функцияПриложение() {


константа завтра = момент (). добавить (1, 'день').формат("Сделай ММММ, ГГГГ");
константа время = момент (). Вычесть (1, 'час').формат("ЧЧ: мм: сс");
константа lastYear = момент (). Установить ('год', 2022).набор('месяц', 1).формат("Сделай ММММ, ГГГГ");
константа час = момент (). Получить ('час');


возвращаться (


"Приложение">
Завтрадата { завтра }


Это было время: {время}, час назад</p>


{ последний год }</p>


{ час }</p>
 </div>
 )
}


экспортпо умолчанию Приложение

В этом примере вы объявить следующие переменные JavaScript: завтра, время, в прошлом году, и час. Эти четыре переменные используют различные методы библиотеки Moment.js для управления датой и временем.

завтра переменная использует добавлять() способ добавить один день к текущей дате. добавлять() Метод добавляет время к данному объекту Moment. Функция принимает два аргумента: значение длительности и строку, представляющую единицу добавляемого времени. Единица может быть годы, месяцы, недели, дни, часы, минуты, и секунды.

Вы также можете вычесть время, используя вычесть() метод. В этом случае время переменная использует вычесть() метод вычитания одного часа из текущего времени.

Используя набор() метод, в прошлом году переменная устанавливает год на 2022 и месяц на февраль (поскольку январь представлен как месяц 0). набор() Метод назначает определенную единицу времени объекту Moment.

С получать() метод, вы можете получить определенное время. получать() метод принимает один аргумент, единицу времени.

Использование Moment.js для анализа даты и времени

Еще одна полезная функция Moment.js — возможность анализировать даты и время из строк. Это может быть полезно при работе с данными из внешних источников.

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

Вот пример того, как вы можете использовать момент() метод для анализа даты и времени:

Импортировать Реагировать от«реагировать»;
Импортировать момент от'момент';
функцияПриложение() {


константа дата = момент ('2920130000', 'Де-ММММ-ГГГГ').на сегодняшний день();
консоль.log(дата);


возвращаться (


</div>
 )
}
экспортпо умолчанию Приложение

В приведенном выше блоке кода момент() метод будет анализировать эту строку «2920130000», используя строку формата «Do-MMMM-YYYY». на сегодняшний день() метод преобразует объект момента в собственный объект даты JavaScript.

на сегодняшний день() Метод не принимает аргументов и возвращает объект даты JavaScript, представляющий ту же дату и время, что и объект момента.

Отображение относительного времени

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

Например:

Импортировать Реагировать от«реагировать»;
Импортировать момент от'момент';
функцияПриложение() {


константа вчера = момент (). вычесть (7, 'день');
константа время1 = вчера.отсейчас(); // 7 дней назад
константа время2 = вчера.доСейчас(); // через 7 дней


возвращаться (




{ время1 }</p>


{ время2 }</p>
 </div>
 )
}


экспортпо умолчанию Приложение

В этом примере отныне() метод возвращает относительное время, прошедшее с указанной даты, в то время как метод к данному моменту() метод возвращает относительное время до текущего времени.

Подробнее о Moment.js

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

Moment.js предлагает несколько других методов, таких как local, startOf, endOf и т. д. Однако с предоставленной информацией вы более чем готовы начать использовать Moment.js в своем приложении React.