Daty

Uff, to jest ciężki temat. Każdy kiedyś zetknie się z datami (lub już się zetknął) i bez odpowiednich narzędzi potrafi to być czasem droga przez mękę. Te wszystkie strefy czasowe, wyświetlanie w różnych formatach, porównywanie itd.

Nasz naczelny Żelownik Bartuś podrzucił libkę o nazwie date-fns. Popieram go całym serduszkiem i dzięki niej mam nadzięję sprawię, że to daty będą bały się Was a nie na odwrót.

Get started

Dodaj libke
Okno terminala
```
npm i date-fns
```
Zaimportuj funkcję format z libki:
```
import { format } from "date-fns";
```
Używaj jako format(data, formater).

Przykłady

Formatowanie daty

Użycie funkcji format do sformatowania daty w czytelny sposób.

Dzisiejsza data: 19/11/2025

import { format } from "date-fns";

export default function HomePage() {
  const today = new Date();
  const formattedDate = format(today, "dd/MM/yyyy");

  return <p>Dzisiejsza data: {formattedDate}</p>;
}

Dodawanie dni do daty

Użycie funkcji addDays, aby obliczyć przyszłe daty.

Data za tydzień: 26 November 2025

import { addDays, format } from "date-fns";

export default function HomePage() {
  const today = new Date();
  const futureDate = addDays(today, 7); // Data za 7 dni
  const formattedFutureDate = format(futureDate, "dd MMMM yyyy");

  return <p>Data za tydzień: {formattedFutureDate}</p>;
}

Porównywanie dat

Sprawdzanie, czy jedna data jest przed lub po innej.

Wydarzenie już się odbyło.

import { isBefore, isAfter } from "date-fns";

export default function HomePage() {
  const today = new Date(); // Dzisiaj
  const eventDate = new Date(2024, 11, 31); // 31 grudnia 2024

  const isEventInFuture = isAfter(eventDate, today);

  return (
    <p>
      {isEventInFuture
        ? "Wydarzenie jest w przyszłości!"
        : "Wydarzenie już się odbyło."}
    </p>
  );
}

Lokalizacja dat

Formatowanie daty w języku np. Angielskim za pomocą opcji locale.

Dzisiejsza data: Wednesday, 19 November 2025

import { format } from "date-fns";
import { enUS } from "date-fns/locale";

export default function HomePage() {
  const today = new Date(); // Dzisiaj
  const formattedDate = format(today, "EEEE, d MMMM yyyy", {
    locale: enUS,
  });

  return <p>Dzisiejsza data: {formattedDate}</p>;
}

Obliczanie różnicy między datami

Użycie differenceInDays do obliczenia liczby dni między dwiema datami.

Do Nowego Roku zostało: -322 dni

import { differenceInDays } from "date-fns";

export default function HomePage() {
  const today = new Date(); // Dzisiaj
  const newYear = new Date(2025, 0, 1); // 1 stycznia 2025

  const daysUntilNewYear = differenceInDays(newYear, today);

  return <p>Do Nowego Roku zostało: {daysUntilNewYear} dni</p>;
}

Wyświetlanie upływu czasu

Wyświetlanie, ile czasu upłynęło od podanej daty za pomocą formatDistance, np. 10 sekund temu.

Wydarzenie miało miejsce około rok temu.

import { formatDistance } from "date-fns";
import { pl } from "date-fns/locale";

export default function HomePage() {
  const eventDate = new Date(2024, 10, 1); // 1 listopada 2024
  const today = new Date();

  const timePassed = formatDistance(eventDate, today, {
    addSuffix: true,
    locale: pl,
  });

  return <p>Wydarzenie miało miejsce {timePassed}.</p>;
}

Dziwne literki do formatowania

Do formatowania dat używamy literek. Każda znaczy co innego. Ważne jest również, czy jest duża czy mała. Szybka ściągawka z najpotrzebniejszymi robaczkami.

Litera	Opis	Przykład (dla `2024-11-27 04:07:09`)
d	Dzień miesiąca (bez zera na początku)	`27`
dd	Dzień miesiąca (z zerem na początku)	`27`
E	Skrócony dzień tygodnia	`Wed`
EEEE	Pełna nazwa dnia tygodnia	`Wednesday`
M	Miesiąc (bez zera na początku)	`11`
MM	Miesiąc (z zerem na początku)	`11`
MMM	Skrócona nazwa miesiąca	`Nov`
MMMM	Pełna nazwa miesiąca	`November`
yy	Ostatnie dwie cyfry roku	`24`
yyyy	Pełny rok	`2024`
H	Godzina w formacie 24-godzinnym	`14`
HH	Godzina w formacie 24-godzinnym (z zerem)	`14`
h	Godzina w formacie 12-godzinnym	`2`
hh	Godzina w formacie 12-godzinnym (z zerem)	`02`
a	AM/PM	`PM`
m	Minuty (bez zera na początku)	`7`
mm	Minuty (z zerem na początku)	`07`
s	Sekundy (bez zera na początku)	`9`
ss	Sekundy (z zerem na początku)	`09`
XXX	Strefa czasowa z dwukropkiem	`+01:00`
x	Czas w milisekundach od UNIX Epoch	`1732610829000`

Robaczki można dowolnie łączyć. Kilka przykładów:

środa, 19 listopada 2025

import { format } from "date-fns";
import { pl } from "date-fns/locale";

export default () =>
  format(new Date(), "EEEE, d MMMM yyyy", {
    locale: pl,
  });

19.11.2025 14:49:56

import { format } from "date-fns";

export default () => format(new Date(), "dd.MM.yyyy HH:mm:ss");

02:49 PM

import { format } from "date-fns";

export default () => format(new Date(), "hh:mm a");

Strefy czasowe

Strefy czasowe to też spory temat, więc postanowiłem zrobić dla nich osobny rodział. Aby używać date-fns dla stref czasowych potrzebujemy specjalnego pakietu o nazwie date-fns-tz.

Get started

Dodaj dodatkowy pakiet
Okno terminala
```
npm i date-fns date-fns-tz
```

Przykłady

Wyświetlanie daty w konkretnej strefie czasowej

Użyj funkcji formatInTimeZone z biblioteki date-fns-tz.

Aktualny czas w Warszawie: 2025-11-19 15:49:56 +01:00

import { formatInTimeZone } from "date-fns-tz";

export default function HomePage() {
  const now = new Date();
  const timeZone = "Europe/Warsaw";

  const formattedDate = formatInTimeZone(
    now,
    timeZone,
    "yyyy-MM-dd HH:mm:ss XXX"
  );

  return <p>Aktualny czas w Warszawie: {formattedDate}</p>;
}

Przekształcenie daty z jednej strefy czasowej na inną

Użyj funkcji toZonedTime i format z date-fns oraz date-fns-tz.

Czas w Nowym Jorku: 2024-11-27 07:00:00 -05:00

import { toZonedTime, format } from "date-fns-tz";

export default function HomePage() {
  const utcDate = new Date("2024-11-27T12:00:00Z"); // Data w UTC
  const timeZone = "America/New_York";

  // Konwersja na strefę czasową
  const zonedDate = toZonedTime(utcDate, timeZone);

  // Formatowanie daty w strefie czasowej
  const formattedDate = format(zonedDate, "yyyy-MM-dd HH:mm:ss XXX", {
    timeZone,
  }); // Czas w Nowym Jorku: 2024-11-27 07:00:00 -05:00

  return <p>Czas w Nowym Jorku: {formattedDate}</p>;
}

Obliczanie różnicy czasu między strefami

Możesz obliczyć różnicę w godzinach między dwiema strefami czasowymi, używając kombinacji toZonedTime i zwykłego obliczenia różnicy dat.

Różnica czasu między Warszawą a Tokio: 8 godzin

import { toZonedTime } from "date-fns-tz";
import { differenceInHours } from "date-fns";

export default function HomePage() {
  const now = new Date();
  const timeZone1 = "Europe/Warsaw";
  const timeZone2 = "Asia/Tokyo";

  const timeInWarsaw = toZonedTime(now, timeZone1);
  const timeInTokyo = toZonedTime(now, timeZone2);

  const hourDifference = differenceInHours(timeInTokyo, timeInWarsaw);

  return <p>Różnica czasu między Warszawą a Tokio: {hourDifference} godzin</p>;
}