JavaScript Academy · Lekcja

Formatowanie dat i godzin

Proszę wyświetlać daty za pomocą Intl.DateTimeFormat.

Formatowanie dat i godzin to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Intl.DateTimeFormat

Intl.DateTimeFormat formatuje obiekty Date zgodnie z lokalizacją, eliminując kruche ręczne tworzenie ciągów znaków.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Różnice między lokalizacjami

Kolejność elementów daty różni się w zależności od regionu: w USA jest to miesiąc/dzień/rok, a w większości Europy dzień/miesiąc/rok.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Gotowe style daty

dateStyle udostępnia gotowe warianty "full", "long", "medium" i "short", pozwalające szybko uzyskać czytelny wynik.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Styl godziny

timeStyle działa tak samo w przypadku części dotyczącej godziny i można go łączyć z dateStyle.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Niestandardowe opcje składników

Aby uzyskać szczegółową kontrolę, należy osobno określić składniki, takie jak year, month, day i weekday.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Formaty miesiąca

month przyjmuje wartości "numeric", "2-digit", "short", "long" i "narrow".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

Format 12- i 24-godzinny

hour12: true/false zastępuje domyślny dla lokalizacji format zegara.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Strefy czasowe

Należy przekazać nazwę strefy czasowej IANA w opcji timeZone, aby wyświetlić datę w dowolnej strefie, niezależnie od lokalnej strefy środowiska uruchomieniowego.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts zwraca tablicę typowanych tokenów, dzięki czemu można stylizować lub zmieniać kolejność poszczególnych elementów.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Formatowanie zakresów

formatRange(start, end) zwięźle wyświetla zakres dat, łącząc wspólne składniki.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Kalendarze niegregoriańskie

Opcja calendar obsługuje systemy takie jak "islamic", "hebrew" czy "japanese".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Szybki test

Proszę przetestować formatowanie dat.

Podsumowanie: daty i godziny

Formatowali Państwo daty i godziny za pomocą Intl.DateTimeFormat, używali gotowych stylów dateStyle/timeStyle i szczegółowych opcji składników, obsługiwali strefy czasowe, zegary 12- i 24-godzinne, formatToParts, zakresy oraz alternatywne kalendarze. Następny temat: czas względny i liczba mnoga.

Często zadawane pytania

Czy lekcja „Formatowanie dat i godzin” jest bezpłatna?

Tak — pełny tekst „Formatowanie dat i godzin” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Formatowanie dat i godzin”?

Proszę wyświetlać daty za pomocą Intl.DateTimeFormat. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Formatowanie dat i godzin”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy