Na stronie czy aplikacji internetowej często wykorzystuje się wyświetlanie daty lub czasu. JavaScript daje świetne narzędzie do jego formatowania, tak aby data jak i czas były odpowiednio sformatowane, uwzględniając język użytkownika, a dokładniej język przeglądarki internetowej.

Poniżej demo ze wszystkimi omawianymi przykładami.

Zobacz demo

Formatowanie daty i czasu

Do formatowania daty i czasu użyjemy obiektu Intl.DateTimeFormat, który przyjmuje wiele różnych parametrów.

Ogólne formatowanie daty i czasu

Na początek wyświetlmy pełną datę i godzinę.

Podstawowe formatowanie daty i czasu

const formatBasicA = new Intl.DateTimeFormat("pl-PL", {
    dateStyle: "full",
    timeStyle: "medium",
});
console.log(formatBasicA.format(new Date()));

// Wynik konsoli (data w konsoli będzie uzależniona od dnia odpalenia skryptu)
// środa, 11 września 2024 19:34:20

W tej formie obiekt Intl.DateTimeFormat, przyjmuje następujące parametry:

• "pl-PL" – kod języka na przykład pl-PL, en-US, podając undefined, zostanie użyty domyślny język przeglądarki użytkownika.
• dateStyle – służy do formatowania daty, przyjmuje następujące parametry
  • full – pełna data z nazwą tygodnia i miesiąca,
  • long – nazwy miesięcy, ale bez dnia tygodnia,
  • medium – skrócone nazwy miesięcy,
  • short – numeryczna reprezentacja daty,
• timeStyle – służy do formatowania czasu
  • full – godzina, minuty, sekundy, często z nazwą strefy czasowej,
  • long – godzina, minuty, sekundy (czasami bez strefy czasowej)
  • medium – godzina i minuty
  • short – Minimalna forma godziny i minut

Zmodyfikujemy powyższy przykład i wyświetlmy dzisiejszą datę w nie co innym formacie i w języku angielskim

const formatBasicB = new Intl.DateTimeFormat("en-US", {
    dateStyle: "full",
    timeStyle: "long",
});
console.log(formatBasicB.format(new Date()));

// Wynik konsoli (data w konsoli będzie uzależniona od dnia odpalenia skryptu)
// Wednesday, September 11, 2024 at 7:58:55 PM GMT+2

Dokładniejsze formatowanie daty

Obiekt Intl.DateTimeFormat, daje możliwość dokładniejszego formatowania daty za pomocą następujących parametrów:

• year – rok, przyjmuje formatowanie
  • numeric – wyświetli rok w postaci 2024
  • 2-digit – wyświetli rok w postaci 24
• month – miesiąc, przyjmuje formatowanie
  • numeric – wyświetli miesiąc w postaci od 1 do 12
  • 2-digit – wyświetli miesiąc w postaci od 01 do 12
  • narrow – wyświetli skróconą nazwę miesiąca w dla wrzesień
  • short – wyświetli krótką nazwę miesiąca wrz dla wrzesień
  • long – wyświetli pełną nazwę miesiąca wrzesień. Nazwa miesiąca zostanie odpowiednio formatowana w zależności od dnia miesiąca, na przykład 12 października a nie 12 październik.
• day – dzień, przyjmuje formatowanie
  • numeric – wyświetli dzień w postaci 1
  • 2-digit – wyświetli dzień w postaci 01
• weekday – dzień tygodnia, przyjmuje formatowanie
  • narrow – wyświetli skróconą nazwę dnia ś dla środy
  • short – wyświetli krótką nazwę dnia śr dla środy
  • long – wyświetli pełną nazwę dnia środa

Poniżej przykład wyświetlający datę tylko w postaci cyfr.

Data w postaci cyfr, format zgodnie z ustawieniem przeglądarki

const formatDateA = new Intl.DateTimeFormat(undefined, {
    year: "numeric",
    month: "2-digit",
    day: "numeric",
});
console.log(formatDateA.format(new Date()));

// Wynik konsoli (data w konsoli będzie uzależniona od dnia odpalenia skryptu)
// 11.09.2024

Jeżeli zmienimy formatowanie undefined na en-US, to ta sama data, zostanie wyświetlona według zasady, którą stosują w USA czyli miesiąc/dzień/rok.

Format daty według zasady z USA

const formatDateB = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "numeric",
});
console.log(formatDateB.format(new Date()));

// Wynik konsoli (data w konsoli będzie uzależniona od dnia odpalenia skryptu)
// 09/11/2024

Dokładniejsze formatowanie czasu

Tak samo jak w przypadku daty, również czas może formatować według własnych preferencji, za pomocą następujących parametrów:

• hour – godzina, przyjmuje formatowanie
  • numeric – wyświetli godzinę w postaci 1
  • 2-digit – wyświetli godzinę w postaci 01
• minute – minuta, przyjmuje formatowanie
  • numeric – wyświetli minutę w postaci 1
  • 2-digit – wyświetli minutę w postaci 01
• second – sekunda, przyjmuje formatowanie
  • numeric – wyświetli sekunda w postaci 1
  • 2-digit – wyświetli sekunda w postaci 01
• timeZoneName – strefa czasowa, przyjmuje formatowanie
  • short – wyświetli skróconą nazwę strefy na przykład GMT, PST
  • long – wyświetli pełną nazwę strefy na przykład Greenwich Mean Time
• era – era (przed naszą erą, naszej ery), przyjmuje formatowanie
  • narrow – wyświetli skróconą nazwę ery
  • short – wyświetli krótką nazwę ery
  • long – wyświetli pełną nazwę ery
• fractionalSecondDigits – określa liczbę miejsc po przecinku od 1 do 3

Poniżej przykład wyświetlający aktualną godzinę.

Aktualna godzina

const formatTimeA = new Intl.DateTimeFormat(undefined, {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
});
console.log(formatTimeA.format(new Date()));

// Wynik konsoli (czas w konsoli będzie uzależniony od godziny odpalenia skryptu)
// 11:15:43

Nic nie stoi na przeszkodzie, aby wyświetlić datę oraz czas jako całość z własnymi preferencjami.

Data i czas

const formatTimeB = new Intl.DateTimeFormat(undefined, {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    weekday: "long",
    timeZone: "Europe/Warsaw",
    timeZoneName: "short",
});
console.log(formatTimeB.format(new Date()));

// Wynik konsoli (data i czas w konsoli będzie uzależniony od dnia i godziny odpalenia skryptu)
// środa, 11 września 2024 20:18:40 CEST

Relatywne formatowanie daty i czasu

Relatywne formatowanie daty i czasu, polega na opisowym upływie daty lub czasu, licząc od dnia dzisiejszego lub czasu teraźniejszego. Na przykład że coś wydarzyło się „2 dni temu” lub „1 godzinę temu”. Do tego posłuży nam obiekt Intl.RelativeTimeFormat.

Relatywne formatowanie daty

const formatRelativeA = new Intl.RelativeTimeFormat(undefined, {
    localeMatcher: "best fit",
    numeric: "always",
    style: "short",
});
console.log(formatRelativeA.format(-1, "day"));

// Wynik konsoli
// 1 dzień temu

Obiekt Intl.RelativeTimeFormat, przyjmuje następujące parametry

• "pl" – język na przykład pl, en, podając undefined, zostanie użyty domyślny język przeglądarki użytkownika.
• options – opcje formatowania
  • localeMatcher – algorytm dopasowania języka. Przyjmuje:
    • lookup – domyślny
    • best fit
  • numeric – określa czy wartość ma być przedstawiona numerycznie czy tekstowo, przyjmuje
    • always – jako liczby na przykład 1 dzień temu
    • auto – domyślnie, wyświetli wczoraj zamiast 1 dzień temu
  • style – określa styl wyświetlania, przyjmuje
    • long – domyślnie, używa długich form na przykład 1 dzień temu
    • short – używa krótszych form 1 mies. temu
    • narrow – używa możliwie najkrótszych form

W zależności czy chcemy wyświetlać informację o dniach, miesiącach czy latach, lub godzinach, minutach czy sekundach, musimy zmienić parametr day w format.

• day – wyświetli informację 1 dzień temu
• month – wyświetli informację 1 miesiąc temu
• year – wyświetli informację 1 rok temu
• second – wyświetli 1 sekundę temu
• minute – wyświetli 1 minutę temu
• hour – wyświetli 1 godzinę temu

Zmiana parametru w format

const formatRelativeB = new Intl.RelativeTimeFormat(undefined, {
    localeMatcher: "best fit",
    numeric: "always",
    style: "narrow",
});
console.log(formatRelativeB.format(-100, "day"));
console.log(formatRelativeB.format(-10, "month"));
console.log(formatRelativeB.format(-1, "year"));

// Wynik konsoli
// 100 dni temu
// 10 mies. temu
// 1 rok temu

W praktyce

Formatowanie daty i czasu najczęściej można spotkać w panelach administracyjnych oraz aplikacjach do zarządzania projektami lub czymś podobnym. Najlepszym przykładem będzie tu aplikacja Asana, w której każda zmiana w zadaniu jest opisywana na przykład 1 godzina temu lub 10 dni temu. Dla tak globalnej aplikacji korzyść płynąca z używania Intl.DateTimeFormat lub Intl.RelativeTimeFormat, jest taka że nie trzeba martwić się o tłumaczenie. O ile używają tych obiektów w swoim kodzie.

Podobał się artykuł?