Moment.js е фантастична библиотека за ефективно управление на датата и часа в приложенията на React.

Управлението на датите и часа в React може да представлява предизвикателство за тези, които не са запознати с района. За щастие има няколко библиотеки, които могат да ви помогнат с управлението на датата и часа в React. Една от тези библиотеки е Moment.js.

Moment.js е лека библиотека с лесен начин за манипулиране и форматиране на дати и часове в JavaScript.

Инсталиране на библиотеката Moment.js

Moment.js библиотеката е a пакет за управление на операции с дата и час в JavaScript. Инсталирането на библиотеката Moment.js е първата стъпка в използването на Moment.js във вашето приложение React. Можете да направите това, като изпълните следната команда във вашия терминал:

момент на инсталиране на npm

След като инсталацията приключи, можете да използвате Moment.js във вашия React компонент.

Използване на Moment.js за показване на дата и час

Можете да използвате Moment.js за показване на дати и часове в конкретен формат във вашето приложение React. За да използвате библиотеката, импортирайте

instagram viewer
момент от инсталирания пакет.

импортиране Реагирайте от"реагира";
импортиране момент от'момент';
функцияПриложение() {


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


връщане (




 Днесдатата на е {дата} 


 Часът е {време} </p>
 </div>
 )
}


износпо подразбиране Приложение

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

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

Някои от тези специални знаци са:

  • ГГГГ: Година с четири цифри
  • YY: Година с две цифри
  • ММ: Месец с две цифри
  • М: Месец с една или две цифри
  • ММММ: Месец в думи
  • DD: Ден от месеца с две цифри
  • д: Ден от месеца с една или две цифри
  • Направи: Ден от месеца с ред
  • HH: Час с две цифри
  • з: Час с една или две цифри
  • мм: минута с две цифри
  • м: Минути с една или две цифри
  • ss: Второ с две цифри
  • с: Второ с една или две цифри

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

The момент() методът може да приема аргумент за дата или час на низ. Когато момент() има аргумент за дата или час на низ, той създава моментен обект, представящ тази дата или час. Низът може да бъде в различни формати, като например ISO 8601, RFC 2822 или Unix timestamp.

Например:

конст дата = момент('1998-06-23').format(„ММММ ДД ГГГГ“);

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

Библиотеката Moment.js също предоставя няколко метода за манипулиране на дати и часове. Тези методи ви позволяват да добавяте или изваждате времеви интервали, да задавате специфични стойности за компоненти за дата и час и да извършвате други приложими операции.

Например:

импортиране Реагирайте от"реагира";
импортиране момент от'момент';
функцияПриложение() {


конст утре = момент().добавяне(1, "ден").format(„Направи ММММ, ГГГГ“);
конст време = момент().изваждане(1, "час").format("ЧЧ: мм: сс");
конст lastYear = moment().set("година", 2022).комплект("месец", 1).format(„Направи ММММ, ГГГГ“);
конст час = момент().get("час");


връщане (


"приложение">
утредатата на е {утре}


Това беше времето: { time }, преди час</p>


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


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


износпо подразбиране Приложение

В този пример вие декларирайте следните променливи на JavaScript: утре, време, миналата година, и час. Тези четири променливи използват различни методи на библиотеката Moment.js за манипулиране на дата и час.

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

Можете също да извадите времето с помощта на изваждане () метод. В този случай, време променливата използва изваждане () метод за изваждане на един час от текущото време.

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

С получи() метод, можете да извлечете конкретно време. The получи() методът приема един аргумент, единица време.

Използване на Moment.js за анализ на дата и час

Друга полезна функция на Moment.js е способността му да анализира дати и часове от низове. Това може да бъде полезно при работа с данни от външни източници.

За да анализирате дата или час от низ, трябва да използвате момент() метод. В този случай, момент() приема два аргумента, низ за дата и низ за форматиране.

Ето пример за това как можете да използвате момент() метод за анализиране на дати и часове:

импортиране Реагирайте от"реагира";
импортиране момент от'момент';
функцияПриложение() {


конст дата = момент('2920130000', „Да-ММММ-ГГГГ“).към днешна дата();
конзола.log( дата );


връщане (


</div>
 )
}
износпо подразбиране Приложение

В кодовия блок по-горе, момент() методът ще анализира този низ ‘2920130000’, като използва форматирания низ „Do-MMMM-YYYY“. The към днешна дата() метод преобразува моментния обект в роден обект за дата на JavaScript.

The към днешна дата() Методът не приема аргументи и връща обект на JavaScript Date, представляващ същата дата и час като обекта момент.

Показване на относително време

С библиотеката Moment.js можете да форматирате и показвате относителното време. За да направите това, използвате от сега() и до сега() методи. Тези методи показват времето между дадена дата и текущия час.

Например:

импортиране Реагирайте от"реагира";
импортиране момент от'момент';
функцияПриложение() {


конст вчера = момент().изваждане(7, "ден");
конст time1 = yesterday.fromNow(); // преди 7 дни
конст time2 = yesterday.toNow(); // след 7 дни


връщане (




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


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


износпо подразбиране Приложение

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

Още към Moment.js

Moment.js е мощна библиотека, която предоставя лесен начин за манипулиране и форматиране на дати и часове в JavaScript. Научихте как да манипулирате, показвате и анализирате дати и часове в React с помощта на Moment.js.

Moment.js предлага няколко други метода, като локален, startOf, endOf и т.н. Въпреки това, с предоставената информация, вие сте повече от подготвени да започнете да използвате Moment.js във вашето приложение React.