Biblioteka Day.js ułatwia obsługę operacji na datach i godzinach w aplikacjach React.

Zarządzanie datą i czasem ma kluczowe znaczenie dla każdej aplikacji, a React nie jest wyjątkiem. Chociaż JavaScript zapewnia wbudowane funkcje manipulacji datą i czasem, mogą one być uciążliwe. Na szczęście wiele zewnętrznych bibliotek może uprościć zarządzanie datami i godzinami w React. Jedną z takich bibliotek jest Day.js.

Day.js to lekka biblioteka do analizowania, sprawdzania poprawności, manipulowania i formatowania dat i godzin w JavaScript.

Instalowanie Day.js

The dzień.js biblioteka jest nowoczesną alternatywą dla Moment.js, która jest kolejną biblioteką używaną do obsługi dat i godzin. Day.js oferuje podobny interfejs API o mniejszej powierzchni i większej wydajności.

Aby używać Day.js w aplikacji React, musisz go najpierw zainstalować. Możesz to zrobić, uruchamiając następujące polecenie w swoim terminalu:

npm zainstaluj dayjs

Przetwarzanie i formatowanie dat i godzin

Day.js zapewnia proste API

instagram viewer
do analizowania i formatowania dat. Możesz uzyskać datę i godzinę za pomocą dayjs() metodę, ale najpierw musisz ją zaimportować z biblioteki Day.js.

Na przykład:

import Reagować z'reagować';
import dayjs z'dayjs';
funkcjonowaćAplikacja() {


konst data = dayjs();
konsola.log (data); 


powrót (




Data i Zarządzanie czasem</p>
 </div>
 )
}


eksportdomyślny Aplikacja

The dayjs() Metoda tworzy nowy obiekt Day.js reprezentujący określoną datę i godzinę. W powyższym przykładzie dayjs() Metoda tworzy obiekt Day.js reprezentujący bieżącą datę i godzinę.

W konsoli obiekt Day.js wyglądałby tak:

The dayjs() metoda akceptuje opcjonalny argument daty, którym może być ciąg znaków, liczba (uniksowy znacznik czasu), obiekt daty JavaScriptlub inny obiekt Day.js. Metoda wygeneruje obiekt Day.js reprezentujący podany argument daty.

Na przykład:

import Reagować z'reagować';
import dayjs z'dayjs';
funkcjonowaćAplikacja() {


konst data = dzieńjs('2023-05-01');
konsola.log (data); // Obiekt Day.js reprezentujący określoną datę


konst unixDate = dayjs(1651382400000);
konsola.log (data unix); // Obiekt Day.js reprezentujący określoną datę


powrót (




Data i Zarządzanie czasem</p>
 </div>
 )
}


eksportdomyślny Aplikacja

Dane wyjściowe obiektu Day.js tego bloku kodu będą podobne do poprzedniego bloku kodu, ale będą miały inne wartości właściwości.

Aby wyświetlić daty wygenerowane jako obiekty Day.js, należy użyć metody format() metoda. The format() Metoda biblioteki Day.js pozwala sformatować obiekt Day.js jako ciąg znaków zgodnie z określonym ciągiem formatującym.

Metoda przyjmuje łańcuch formatu jako argument. Argument łańcuchowy może zawierać kombinację liter i znaków specjalnych, z których każdy ma określone znaczenie,

Na przykład:

import Reagować z'reagować';
import dayjs z'dayjs';
funkcjonowaćAplikacja() {


konst data = dzieńjs('2023-05-01').format(„dddd, MMMM D, RRRR”); // Poniedziałek, 1 maja 2023 r
konst czas = dayjs().format(„GG: mm: ss”); //09:50:23
konst unixDate = dayjs(1651382400000).format(„MM/DD/RR”); // 05/01/22


powrót (




{data}</p>


{unixDate}</p>


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


eksportdomyślny Aplikacja

The data zmienna wyświetli datę w tym formacie „środa, 26 kwietnia 2023 r.”. Ciąg formatu to „dddd, MMMM D, RRRR” Gdzie dddd jest dniem tygodnia, MMM to miesiąc słownie, D jest dniem miesiąca zapisanym jedną lub dwiema cyframi, oraz RRRR to rok czterocyfrowy.

The unixDate zmienna jest sformatowana jako ciąg przy użyciu ciągu formatu „MM/DD/RRRR,” który reprezentuje miesiąc za pomocą dwóch cyfr, dzień miesiąca za pomocą dwóch cyfr i rok za pomocą czterech cyfr.

The czas zmienna wyświetla aktualny czas w określonym formacie. Ciąg formatu to „GG: mm: ss” gdzie GG reprezentuje godziny, mm reprezentuje minuty, a SS reprezentuje sekundy.

Manipulowanie datami i godzinami

Day.js zapewnia wiele metod, które ułatwiają manipulowanie datami i godzinami. Możesz odnieść się do dzień.js oficjalnej dokumentacji, aby uzyskać pełną listę dostępnych metod manipulowania datami i godzinami.

Na przykład:

import Reagować z'reagować';
import dayjs z'dayjs';
funkcjonowaćAplikacja() {


konst data = dayjs().add(7,'dni').format(„dddd, MMMM D, RRRR”); // Środa, 16 czerwca 2023 r 
konst czas = dayjs().odejmuj(2, 'godziny').format(„GG: mm: ss”); // 07:53:00


powrót (




{data}</p>


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


eksportdomyślny Aplikacja

Powyższy blok kodu wykorzystuje dodać() metodę dodania 7 dni do bieżącej daty. The dodać() Metoda pozwala dodać określoną ilość czasu do obiektu Day.js. Metoda przyjmuje dwa argumenty, ilość czasu do dodania liczb i jednostkę czasu do dodania.

z odejmować() metody, możesz odjąć określoną ilość czasu od dzień.js obiekt. The czas zmienna odejmuje 2 godziny od bieżącego czasu za pomocą odejmować() metoda.

Wyświetlanie czasu względnego

Day.js udostępnia kilka metod, w tym od teraz(), do teraz(), Do(), I z() aby wyświetlić czas względny, na przykład „2 godziny temu” lub „za 3 dni”. Aby użyć tych metod, zaimportuj plik czas względny wtyczka z dayjs/plugin/relativeTime w Twojej aplikacji React.

Na przykład:

import Reagować z'reagować';
import dayjs z'dayjs';
import czas względny z'dayjs/plugin/czas względny';
funkcjonowaćAplikacja() {


 dayjs.extend (czas względny);

konst data = dayjs().add(7, 'dni')
konst względnaData = data.zTeraz(); // za 7 dni


konst date2 = dayjs().odejmij(2, 'godziny');
konst względnaData2 = data2.doTeraz(); // w 2 godziny


konst lastYear = dayjs().subtract(1, 'rok');
konst diff = data.od (ostatni rok); // za rok
konst diff2 = data.do (ostatni rok) // rok temu


powrót (




{ data względna }</p>


{ względna data2 }</p>


{ różnica }</p>


{ różnica2 }</p>
 </div>
 )
}


eksportdomyślny Aplikacja

The od teraz() Funkcja wyświetla względny ciąg czasu reprezentujący różnicę między bieżącym czasem a określoną datą. W tym przykładzie od teraz() wyświetla różnicę między data i aktualny czas.

The do teraz() funkcja jest podobna do od teraz() funkcji w tym, że wyświetla ciąg reprezentujący różnicę między określoną datą a bieżącą godziną. Kiedy zadzwonisz do do teraz() funkcja zwraca względny ciąg czasu do bieżącego czasu.

Wreszcie, korzystając z z() I Do() funkcje, możesz wyświetlić względny ciąg czasu reprezentujący różnicę między dwiema określonymi datami. W tym przykładzie widać różnicę między ostatni rok I data używając z() I Do() Funkcje.

Uwaga: możesz również przekazać opcjonalny argument boolowski do metody od teraz(), do teraz(), z(), I Do() metody określające, czy sufiks ma być uwzględniany, czy wykluczany (np. „ago” lub „in”).

Na przykład:

konst data = dayjs().add(7, 'dni')
konst względnaData = data.odTeraz(PRAWDA); // 7 dni
konst date2 = dayjs().odejmij(2, 'godziny');
konst względnaData2 = data2.doTeraz(PRAWDA); // 2 godziny
konst lastYear = dayjs().subtract(1, 'rok');
konst diff = data.z (zeszłego roku, PRAWDA) // rok
konst diff2 = data.do (zeszłego roku, PRAWDA) // rok

Przechodzący FAŁSZ do argumentu wyświetli daty z sufiksem.

Skuteczne zarządzanie datą i czasem

Zarządzanie datą i godziną jest kluczowym aspektem każdej aplikacji, a Day.js zapewnia łatwą w obsłudze i elastyczną bibliotekę do obsługi tych operacji w aplikacji React. Włączając Day.js do swojego projektu, możesz łatwo formatować daty i godziny, analizować ciągi znaków i manipulować czasem trwania.

Dodatkowo Day.js oferuje szereg wtyczek, które rozszerzają jego funkcjonalność i czynią go jeszcze potężniejszym. Niezależnie od tego, czy budujesz prosty kalendarz, czy złożony system planowania, Day.js to doskonały wybór do zarządzania datą i czasem w aplikacji React.