Dzisiaj będzie krótko, rzeczowo i na temat (co dość rzadko mi się zdarza). Otóż: jak dobrze zrobić datę po polsku w JS i się przy tym nie narobić.

Dotąd jedynym właściwym sposobem były różne dziwne kombinacje typu "stwórzmy sobie tablicę z polskimi nazwami miesięcy i dni tygodnia, a następnie podstawiajmy pod dane, zwracane przez new Date". Mogą one wyglądać rozwlekle i odpychająco (a ich autorem nie jest Polak). Mogą być też wzorowane na innych językach, stając się jeszcze bardziej rozwlekłe i… nie JS-owe. Mogą w końcu zmienić się po prostu w wywołanie odpowiedniej, krótkiej funkcyjki w PHP, po stwierdzeniu, że JS się do tego nie nadaje.

Na szczęście się to zmieniło. I to nie znowu tak niedawno (bo w 2012). Wtedy powstał standard ECMA-402 (ECMAScript Internationalization API). Oczywiście na odzew ze strony producentów przeglądarek trzeba było ciut poczekać, niemniej – jeśli wierzyć MDN – działa dziś wszędzie, oprócz Safari i – co prawdopodobnie może być o wiele ważniejsze – node.js (jednak od czego jest niezawodny GitHub i polyfille; oczywiście w node.js/io.js obsługę można sobie wkompilować).

Cały standard składa się z 3 głównych "klas", zamkniętych w krótkiej i schludnej przestrzeni nazw – Intl. Są to:

  • Intl.Collator – służący do porównywania tekstu
  • Intl.NumberFormat – służący do formatowania wszelkiej maści liczb (między innymi walut czy liczebników porządkowych)
  • Intl.DateTimeFormat – tak, tego właśnie użyjemy

Żeby wyświetlić ładną datę po polsku, musimy stworzyć nowy obiekt "klasy" Intl.DateTimeFormat. Jako pierwszy parametr konstruktor bierze nazwę języka (oczywiście zgodną ze standardem ISO, zatem dwuliterowy skrót):

Kod:

var formatter = new Intl.DateTimeFormat( 'pl' );

Już! Pierwszy krok za nami. Mamy obiekt wyświetlający datę po polsku. Udostępnia on aż jedną metodę – format – która formatuje przekazaną jej datę (jeśli jej nie podamy, zastosuje aktualną – przynajmniej w Chrome; polecam jednak ją podawać dla zwiększenia czytelności kodu).

Kod:

formatter.format( new Date() ); // 23.7.2016

Jak widać, mało imponujące. Równie dobrze można to uznać za datę po angielsku. Na pomoc przychodzi nam drugi parametr konstruktora Intl.DateTimeFormat – jest to obiekt opcji. Przyjrzyjmy się takiemu przykładowi:

Kod:

var formatter = new Intl.DateTimeFormat( 'pl', {
	day: 'numeric',
	month: 'long',
	year: 'numeric'
} );
formatter.format( new Date() ); // 23 lipca 2016

Voila! To jest dokładnie to, o co nam chodziło. Oczywiście opcji jest więcej, po dokładny ich spis zapraszam na MDN.

Komentarze

comments powered by Disqus