ANGULAR 2 FORMAT DATE PIPE

W większości aplikacji zachodzi potrzeba wyświetlania dat w różnych formatach. Największą popularnością na front-endowym rynku cieszy się biblioteka moment.js. W tym krótkim artykule, pokażę jak stworzyć Pipe, który umożliwi nam wyświetlanie dat w dowolnych formatach, w oparciu o wspomnianą bibliotekę Moment.

TWORZYMY PIPE FORMATUJĄCY DATY

Zaczynamy od ściągnięcia paczki do naszej aplikacji poprzez NPM:

Tworzymy plik format-date.pipe.ts i umieszczamy w nim następujący kod:

Pamiętaj aby w  imporcie * as moment, uwzględnić swoją ścieżkę do biblioteki. W ten oto sposób stworzyliśmy gotowego Pipe’a do wyświetlania dat.

Jak widzimy, metoda transform przyjmuje 2 parametry:

  •  wartość w odpowiednim typie ( string, number etc), którą będziemy chcieli sformatować
  • oraz docelowy format daty, np. ‚DD-MM-YYYY, HH:mm’

Celem artykułu nie jest omawianie spread operatora ( …args) oraz ogólnego schematu tworzenia Pipe’ów. Jeśli chcesz zagłębić te wątki, polecam zajrzeć do dokumentacji:

SPREAD OPERATOR

ANGULAR.IO PIPES

Skoro Pipe gotowy, to dodajemy go w interesującym nas module, np w app.module.ts:

I używamy w następujący sposób, przekazując interesujący nas format w stringu:

Dostępne formaty znajdziesz w dokumentacji bliboteki momentJS.

Dla formalności napiszmy jeszcze parę testów (format-date.pipe.spec.ts):

Vuala, nasz format-date pipe gotowy ; ) Live example dostępny na plunkerze:

LIVE EXAMPLE

 

Na podsumowanie dodam, że powyższy przykład formatuje daty dla Twojej strefy czasowej. Jeśli chcesz aby Pipe dotyczył czasu UTC, wystarczy w środku kodu naszego pipe, podmienić return na następujący kod:

One Comment

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *