Plac zabaw date-fns

Co to jest date-fns?

date-fns to nowoczesna biblioteka narzędzi dat w JavaScript, oferująca kompleksowe, spójne i niezawodne funkcje do pracy z datami w JavaScript. W przeciwieństwie do natywnego obiektu Date w JavaScript, który ma wiele nieścisłości i dziwactw, date-fns zapewnia modularne, funkcyjne podejście do manipulacji datami. Biblioteka jest tree‑shakeable, co oznacza, że dołączasz tylko te funkcje, których faktycznie używasz, utrzymując rozmiar pakietu na minimalnym poziomie. Biblioteka zawiera ponad 200 funkcji obejmujących wszystko, od formatowania i parsowania po porównywanie, manipulowanie i lokalizowanie dat.

Dlaczego warto używać playgrounda date-fns?

Praca z datami w JavaScript może być trudna — strefy czasowe, wzorce formatowania i arytmetyka dat często prowadzą do nieoczekiwanych wyników. Środowisko playground pozwala eksperymentować z funkcjami date-fns w czasie rzeczywistym, zobaczyć natychmiastowy wynik i poznać API bez konieczności konfigurowania pełnego projektu. Jest idealne do testowania ciągów formatowania, debugowania obliczeń dat lub szybkiego prototypowania logiki dat przed jej integracją w aplikacji.

Opis narzędzia

date-fns Playground to interaktywne środowisko kodowania, które umożliwia pisanie i wykonywanie kodu JavaScript z w pełni załadowaną biblioteką date-fns. Cała biblioteka date-fns jest dostępna poprzez obiekt dateFns, dając dostęp do wszystkich 200+ funkcji. Kod uruchamia się automatycznie w miarę pisania (z debouncingiem), a wszystkie wyjścia console.log, console.warn i console.error pojawiają się w wbudowanym terminalu pod edytorem. Dzięki temu idealnie nadaje się do nauki date-fns, testowania operacji na datach i eksperymentowania z różnymi opcjami formatowania.

Przykłady

Formatuj bieżącą datę:

const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// Output: December 30th, 2025

Oblicz liczbę dni między dwiema datami:

const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " days");
// Output: 364 days

Dodaj czas do daty:

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Next week:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Next month:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Sprawdź, czy data jest w przeszłości lub w przyszłości:

const date = new Date(2024, 5, 15);
console.log("Is past?", dateFns.isPast(date));
console.log("Is future?", dateFns.isFuture(date));

Parsuj ciąg daty:

const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// Output: Thursday, December 25th, 2025

Funkcje

• Pełna biblioteka date-fns: Dostęp do wszystkich 200+ funkcji date-fns poprzez obiekt dateFns
• Wykonywanie kodu na żywo: Kod uruchamia się automatycznie w miarę pisania z inteligentnym debouncingiem
• Wbudowany terminal: Natychmiastowy podgląd wyjścia konsoli bez użycia narzędzi deweloperskich przeglądarki
• Podświetlanie składni: Podświetlanie składni JavaScript dla lepszej czytelności kodu
• Obsługa błędów: Błędy w czasie wykonywania są wyraźnie wyświetlane w terminalu

Przypadki użycia

• Nauka date-fns: Eksperymentuj z różnymi funkcjami i zobacz wyniki od razu, bez konfigurowania projektu
• Testowanie formatów dat: Wypróbuj różne ciągi formatowania, aby znaleźć dokładny wzorzec wyjścia, którego potrzebujesz
• Prototypowanie obliczeń dat: Testuj złożoną arytmetykę dat, taką jak dodawanie dni roboczych, znajdowanie interwałów czy porównywanie dat
• Debugowanie logiki dat: Izoluj i testuj fragmenty kodu związane z datami z Twoich projektów
• Szybkie konwersje dat: Konwertuj między formatami dat lub obliczaj różnice czasowe w locie

Popularne funkcje date-fns

Referencja tokenów formatowania