Moment.js to fantastyczna biblioteka do efektywnego zarządzania datami i czasem w aplikacjach React.

Zarządzanie datami i godzinami w React może stanowić wyzwanie dla tych, którzy nie znają tego obszaru. Na szczęście istnieje kilka bibliotek, które mogą pomóc w zarządzaniu datą i czasem w React. Jedną z takich bibliotek jest Moment.js.

Moment.js to lekka biblioteka z prostym sposobem manipulowania i formatowania dat i godzin w JavaScript.

Instalowanie biblioteki Moment.js

Moment.js biblioteka jest A pakiet do zarządzania operacjami daty i czasu w JavaScript. Instalacja biblioteki Moment.js to pierwszy krok w używaniu Moment.js w aplikacji React. Możesz to zrobić, uruchamiając następujące polecenie w swoim terminalu:

moment instalacji npm

Po zakończeniu instalacji możesz użyć Moment.js w swoim komponencie React.

Używanie Moment.js do wyświetlania daty i godziny

Możesz użyć Moment.js do wyświetlania dat i godzin w określonym formacie w aplikacji React. Aby skorzystać z biblioteki, zaimportuj za chwilę z zainstalowanego pakietu.

instagram viewer 
import Reagować z'reagować';
import za chwilę z'za chwilę';
funkcjonowaćAplikacja() {


konst data = moment().format(„MMMM DD RRRR”);
konst czas = moment().format(„GG mm ss”);


powrót (




 Dzisiajdata to { data } 


 Czas to { czas } </p>
 </div>
 )
}


eksportdomyślny Aplikacja

The za chwilę() Metoda tworzy nowy obiekt moment, który reprezentuje określony punkt w czasie. The format() Metoda formatuje obiekt momentu na reprezentację łańcuchową.

The format() Metoda przyjmuje argument łańcuchowy określający żądany format obiektu momentu. Argument łańcuchowy może zawierać kombinację liter i znaków specjalnych, z których każdy ma określone znaczenie.

Niektóre z tych znaków specjalnych to:

  • RRRR: Rok z czterema cyframi
  • YY: Rok z dwiema cyframi
  • mm: Miesiąc z dwiema cyframi
  • M: Miesiąc z jedną lub dwiema cyframi
  • MMM: Miesiąc słownie
  • DD: Dzień miesiąca z dwiema cyframi
  • D: Dzień miesiąca z jedną lub dwiema cyframi
  • Do: Dzień miesiąca z liczbą porządkową
  • GG: Godzina z dwiema cyframi
  • H: Godzina z jedną lub dwiema cyframi
  • mm: Minuta z dwiema cyframi
  • M: Minuta z jedną lub dwiema cyframi
  • SS: Sekunda z dwiema cyframi
  • S: Sekunda z jedną lub dwiema cyframi

Kiedy Aplikacja komponent w poprzednim bloku kodu jest renderowany, bieżąca data i godzina są wyświetlane w określonym formacie na ekranie.

The za chwilę() Metoda może przyjąć argument typu data lub godzina. Kiedy za chwilę() ma argument typu data lub godzina, tworzy obiekt momentu reprezentujący tę datę lub godzinę. Ciąg może mieć różne formaty, takie jak ISO 8601, RFC 2822 lub sygnatura czasowa systemu Unix.

Na przykład:

konst data = chwila ('1998-06-23').format(„MMMM DD RRRR”);

Używanie Moment.js do manipulowania datą i godziną

Biblioteka Moment.js udostępnia również kilka metod manipulowania datami i godzinami. Metody te umożliwiają dodawanie lub odejmowanie przedziałów czasu, ustawianie określonych wartości składników daty i godziny oraz wykonywanie innych odpowiednich operacji.

Na przykład:

import Reagować z'reagować';
import za chwilę z'za chwilę';
funkcjonowaćAplikacja() {


konst jutro = chwila().add(1, 'dzień').format(„Zrób MMMM, RRRR”);
konst czas = moment().odjąć(1, 'godzina').format(„GG: mm: ss”);
konst ostatni rok = moment().set('rok', 2022).ustawić('miesiąc', 1).format(„Zrób MMMM, RRRR”);
konst godzina = moment().get('godzina');


powrót (


„Aplikacja”>
Jutrodata jest {jutro}


To był czas: { time }, godzinę temu</p>


{ ostatni rok }</p>


{ godzina }</p>
 </div>
 )
}


eksportdomyślny Aplikacja

W tym przykładzie ty zadeklaruj następujące zmienne JavaScript: jutro, czas, ostatni rok, I godzina. Te cztery zmienne wykorzystują różne metody biblioteki Moment.js do manipulowania datą i godziną.

The jutro zmienna używa dodać() sposób dodania jednego dnia do bieżącej daty. The dodać() Metoda dodaje czas do danego obiektu Moment. Funkcja przyjmuje dwa argumenty: wartość czasu trwania i ciąg reprezentujący jednostkę czasu do dodania. Jednostka może być lata, miesiące, tygodnie, dni, godziny, minuty, I sekundy.

Możesz także odjąć czas za pomocą odejmować() metoda. W tym przypadku czas zmienna używa odejmować() metoda odejmowania jednej godziny od aktualnego czasu.

Używając ustawić() metoda, tzw ostatni rok zmienna ustawia rok na 2022, a miesiąc na luty (ponieważ styczeń jest reprezentowany jako miesiąc 0). The ustawić() Metoda przypisuje konkretną jednostkę czasu do obiektu Moment.

z Dostawać() metoda, możesz pobrać określony czas. The Dostawać() metoda przyjmuje jeden argument, jednostkę czasu.

Używanie Moment.js do analizowania daty i godziny

Kolejną przydatną funkcją Moment.js jest możliwość analizowania dat i godzin z ciągów znaków. Może to być przydatne podczas pracy z danymi ze źródeł zewnętrznych.

Aby przeanalizować datę lub godzinę z ciągu, musisz użyć metody za chwilę() metoda. W tym przypadku za chwilę() Metoda przyjmuje dwa argumenty, ciąg daty i ciąg formatu.

Oto przykład, jak możesz użyć za chwilę() metoda analizowania dat i godzin:

import Reagować z'reagować';
import za chwilę z'za chwilę';
funkcjonowaćAplikacja() {


konst data = chwila ('2920130000', „Do-MMMM-RRRR”).spotykać się z kimś();
konsola.log(data);


powrót (


</div>
 )
}
eksportdomyślny Aplikacja

W powyższym bloku kodu za chwilę() metoda przeanalizuje ten ciąg „2920130000” przy użyciu ciągu formatu „Do-MMMM-RRRR”. The spotykać się z kimś() Metoda konwertuje obiekt momentu na natywny obiekt JavaScript Date.

The spotykać się z kimś() Metoda nie przyjmuje żadnych argumentów i zwraca obiekt JavaScript Date reprezentujący tę samą datę i godzinę, co obiekt momentu.

Wyświetlanie czasu względnego

Dzięki bibliotece Moment.js możesz formatować i wyświetlać czas względny. Aby to zrobić, użyj od teraz() I do teraz() metody. Te metody wyświetlają czas między podaną datą a bieżącą godziną.

Na przykład:

import Reagować z'reagować';
import za chwilę z'za chwilę';
funkcjonowaćAplikacja() {


konst wczoraj = moment().odejmuj(7, 'dzień');
konst czas1 = wczoraj.zTeraz(); // 7 dni temu
konst czas2 = wczoraj.do teraz(); // za 7 dni


powrót (




{ czas1 }</p>


{ czas2 }</p>
 </div>
 )
}


eksportdomyślny Aplikacja

W tym przykładzie od teraz() Metoda zwraca względny czas, jaki upłynął od określonej daty, podczas gdy metoda do teraz() Metoda zwraca czas względny do czasu bieżącego.

Więcej do Moment.js

Moment.js to potężna biblioteka, która zapewnia prosty sposób manipulowania i formatowania dat i godzin w JavaScript. Nauczyłeś się manipulować, wyświetlać i analizować daty i godziny w React przy użyciu Moment.js.

Moment.js oferuje kilka innych metod, takich jak local, startOf, endOf i tak dalej. Jednak dzięki dostarczonym informacjom jesteś więcej niż przygotowany do rozpoczęcia używania Moment.js w swojej aplikacji React.