Data po polsku

Wersja PDF

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ć.

Po staremu

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.

Intl na ratunek!

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

Formatujemy datę

Ż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):

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).

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:

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.