Praca z datami Używanie date-fns w JavaScript

Praca z datami bywa skomplikowana, lecz biblioteka date-fns znacznie upraszcza manipulację datami w środowisku JavaScript.

Zanurzmy się w możliwościach pakietu date-fns, który może znacząco ułatwić nasze programistyczne zadania. Ten pakiet charakteryzuje się lekkością i efektywnością.

Instalacja pakietu

Aby móc korzystać z zewnętrznego pakietu, konieczne jest skonfigurowanie projektu za pomocą menedżera pakietów npm. Przyjrzyjmy się, jak szybko przeprowadzić tę konfigurację.

Zakłada się, że masz już zainstalowane środowisko NodeJS lub preferowane IDE.

• Przejdź do folderu, w którym zamierzasz pracować nad projektem.
• Użyj polecenia `npm init`, aby zainicjować nowy projekt.
• Odpowiedz na wyświetlane pytania, dostosowując opcje do swoich potrzeb.
• Teraz zainstaluj bibliotekę date-fns, korzystając z poniższego polecenia:

npm install date-fns

• Utwórz nowy plik o nazwie `dateFunctions.js`.

W tym momencie jesteśmy przygotowani, by zagłębić się w działanie pakietu date-fns. Przejdźmy do analizy kilku fundamentalnych metod.

Sprawdzanie poprawności daty

Nie każda data jest ważna.

Przykładowo, data 30 lutego 2021 roku nie istnieje. Jak zatem możemy upewnić się, czy dana data jest prawidłowa?

Metoda `isValid` z pakietu date-fns pozwala nam z łatwością zweryfikować, czy przekazana data jest poprawna, czy nie.

Przeanalizujmy działanie poniższego kodu, który wykorzystuje tę metodę do weryfikacji poprawności dat:

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Po uruchomieniu tego kodu okaże się, że data 30 lutego 2021 jest uznana za ważną. To zaskakujące!

Dlaczego tak się dzieje?

JavaScript automatycznie przekształca nadmiarowy dzień lutego na 1 marca 2021, która jest prawidłową datą. Aby to potwierdzić, wypiszmy na konsoli nową datę, podaną jako string „2021, 02, 30”:

console.log(new Date("2021, 02, 30"));

Biblioteka date-fns oferuje metodę `parse`, która pozwala uniknąć tego problemu. Metoda ta analizuje dostarczoną datę i zwraca precyzyjne rezultaty.

Spójrzmy na poniższy przykład:

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

Formatowanie dat

Jedną z podstawowych operacji podczas pracy z datami jest ich formatowanie według własnych potrzeb. Metoda `format` z biblioteki date-fns umożliwia przedstawianie dat w różnych formatach.

Możemy chcieć sformatować datę jako 23-01-1993, 1993-01-23 10:43:55, wtorek, 23 stycznia 1993 itd. Poniższy kod prezentuje, jak osiągnąć te formaty:

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

Kompletną listę formatów można znaleźć tutaj.

Dodawanie dni

Metoda `addDays` jest używana do wyznaczania daty, która nastąpi po określonej liczbie dni.

Możemy łatwo dodać określoną liczbę dni do wybranej daty, aby uzyskać datę po tym okresie. Ma to szerokie zastosowanie.

Załóżmy, że Twoje urodziny są za X dni, ale jesteś bardzo zajęty. Dzięki metodzie `addDays` możesz łatwo ustawić przypomnienie o nadchodzących urodzinach. Przykładowy kod:

const { format, addDays } = require("date-fns");

const today = new Date();

// urodziny za 6 dni
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

Podobnie jak metoda `addDays`, istnieją inne metody, takie jak `addHours`, `subHours`, `addMinutes`, `subMinutes`, `addSeconds`, `subSeconds`, `subDays`, `addWeeks`, `subWeeks`, `addYears`, `subYears`, etc. Ich funkcjonalność jest łatwa do odgadnięcia na podstawie nazw.

Zachęcamy do eksperymentowania z nimi.

Obliczanie odległości między datami

Samodzielne pisanie kodu do porównywania dat jest trudne i pracochłonne. Dlaczego w ogóle porównujemy daty?

Porównywanie dat jest używane w wielu aplikacjach. W serwisach społecznościowych widzimy komunikaty typu „1 minutę temu”, „12 godzin temu”, „1 dzień temu” itp. To wymaga porównania czasu publikacji z obecnym czasem.

Metoda `formatDistance` robi dokładnie to. Zwraca różnicę pomiędzy dwiema podanymi datami.

Napiszmy kod, który wyliczy Twój wiek:

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Wiek: ${formatDistance(presentDay, birthday)}`);

Iteracja po dniach w przedziale

Załóżmy, że chcesz uzyskać daty i nazwy kolejnych X dni. Metoda `eachDayOfInterval` ułatwia to, zwracając dni między datą początkową a końcową.

Wyświetlmy kolejne 30 dni od dzisiaj:

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

Wybieranie daty maksymalnej i minimalnej

Metody `max` i `min` znajdują odpowiednio datę maksymalną i minimalną wśród dostarczonych dat. Metody te są bardzo intuicyjne i łatwe w użyciu. Przejdźmy do kodu:

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);

Porównywanie dat

Funkcjonalność metody `isEqual` jest łatwa do przewidzenia. Jak sugeruje nazwa, służy ona do weryfikacji, czy dwie daty są identyczne. Przyjrzyj się przykładowemu kodowi poniżej:

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

Podsumowanie

Szczegółowe omówienie każdej metody z biblioteki date-fns zajęłoby bardzo dużo czasu. Najlepszym podejściem do nauki jest rozpoczęcie od poznania fundamentalnych metod, a następnie zagłębienie się w dokumentację w celu poszerzenia wiedzy. Zastosuj to podejście także do pakietu date-fns.

W tym samouczku poznałeś podstawowe metody. Aby dowiedzieć się więcej, sięgnij do dokumentacji lub rozważ udział w kursach online, takich jak JavaScript, jQuery i JSON.

Życzymy owocnego kodowania! 👨‍💻