Praca z datami Używanie date-fns w JavaScript

Praca z datami nie jest łatwym zadaniem. Ale pakiet date-fns ułatwia pracę z datami w JavaScript.

Zagłębmy się głęboko w pakiet date-fns, aby uczynić nasze życie łatwiejszym niż wcześniej. Pakiet date-fns jest lekki.

Spis treści:

Instalowanie pakietu

Musimy skonfigurować projekt z npm do pracy z pakietem innej firmy. Zobaczmy szybko, jak zakończyć naszą konfigurację.

Zakładam, że masz zainstalowany NodeJS lub IDE, aby to przećwiczyć.

Przejdź do żądanego katalogu, w którym chcesz pracować.
Uruchom polecenie npm init, aby zainicjować projekt.
Odpowiedz na wszystkie pytania na podstawie swoich preferencji.
Teraz zainstaluj date-fns za pomocą poniższego polecenia

npm install date-fns

Utwórz plik o nazwie dateFunctions.js

Teraz jesteśmy gotowi, aby przejść do pakietu date-fns. Chodźmy i nauczmy się kilku podstawowych metod z pakietu.

jest ważna

Wszystkie daty są nieważne.

Na przykład nie ma takiej daty jak 2021-02-30. Jak sprawdzić, czy data jest aktualna czy nie?

Metoda isValid z pakietu date-fns pomoże nam ustalić, czy podana data jest poprawna, czy nie.

Sprawdź, czy poniższy kod działa poprawnie, czy nie, z ważnością dat.

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

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

Jeśli wykonasz powyższy kod, przekonasz się, że 30 lutego 2021 r. jest ważny. Oh! To nie jest.

Dlaczego tak się dzieje?

JavaScript konwertuje dodatkowy dzień lutego na 1 marca 2021, który jest poprawną datą. Aby to potwierdzić, wydrukuj nową datę („2021, 02, 30”) na konsoli.

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

Pakiet date-fns udostępnia metodę o nazwie parse, która pozwala obejść ten problem. Metoda parse analizuje podaną datę i zwraca dokładne wyniki.

Spójrz na poniższy kod.

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));

format

Jednym z podstawowych zastosowań podczas pracy z datami jest formatowanie ich według własnego uznania. Daty formatujemy w różnych formatach za pomocą metody format z pakietu date-fns.

Sformatuj datę jako 23-01-1993, 1993-01-23 10:43:55, wtorek, 23 stycznia 1993 itd. Uruchom następujący kod, aby uzyskać odpowiednią datę we wspomnianych formatach.

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"));

Możesz znaleźć pełną listę formatów tutaj.

addDays

Metoda addDays służy do ustawienia terminu, który upłynie po określonej liczbie dni.

Po prostu możemy dodać dni do dowolnej daty, aby otrzymać datę po kilku dniach. Ma wiele zastosowań.

Powiedzmy, że masz urodziny po X dniach i jesteś zajęty w te dni. Możesz nie pamiętać urodzin w swoim napiętym harmonogramie. Możesz po prostu skorzystać z metody addDays, aby powiadomić Cię o urodzinach po X dniach. Masz kod.

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

const today = new Date();

// birthday after 6 days
const birthday = addDays(today, 6);

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

Podobnie jak w metodzie addDays istnieją inne metody, takie jak addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, itp.. Można łatwo odgadnąć funkcjonalność metod po ich nazwach.

Wypróbuj je.

formatOdległość

Pisanie kodu do porównywania dat od podstaw to koszmar. Dlaczego w ogóle porównujemy daty?

Istnieje wiele aplikacji, w których widziałeś porównania dat. Jeśli weźmiesz serwisy społecznościowe, pojawi się slogan mówiący 1 minutę temu, 12 godzin temu, 1 dzień temu itp. Tutaj używamy porównania dat od daty i godziny postu do obecnej daty i godziny.

Metoda formatDistance robi to samo. Zwraca lukę między podanymi dwiema datami.

Napiszmy program, który określi Twój wiek.

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

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

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

każdy dzień interwału

Powiedzmy, że musisz znaleźć nazwy i daty na następne X dni. Metoda eachDayOfInterval pomaga nam znaleźć dni między datą początkową a końcową.

Dowiedzmy się o kolejnych 30 dniach 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"));
});

max i min

Metody max i min znajdują odpowiednio daty maksymalne i minimalne wśród podanych dat. Metody zawarte w date-fns są bardzo dobrze znane i łatwe do odgadnięcia funkcjonalności tych metod. Napiszmy trochę 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])}`);

jest równy

Możesz łatwo odgadnąć funkcjonalność metody isEqual. Jak myślisz, metoda isEqual służy do sprawdzania, czy dwie daty są równe, czy nie. Zobacz przykładowy kod 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));

Wniosek

Jeśli mówimy o każdej metodzie w pakiecie date-fns, ukończenie zajmuje kilka dni. Najlepszym sposobem na poznanie dowolnego pakietu jest zapoznanie się z jego podstawowymi metodami, a następnie przeczytanie dokumentacji w celu uzyskania dalszych informacji. Zastosuj ten sam scenariusz również dla pakietu date-fns.

Nauczyłeś się podstawowych metod w tym samouczku. Wyszukaj konkretne zastosowanie w dokumentacja lub rozważ udział w kursach online, takich jak JavaScript, jQuery i JSON.

Szczęśliwego kodowania 👨‍💻