JavaScript: Odczytywanie i formatowanie daty

0:00W tej i w kilku kolejnych lekcjach pokażę Ci, jak w języku JavaScript możemy

0:04pracować z datami. I to co pokaże będzie działać zarówno w

0:07przeglądarce internetowej, jak i w innych środowiskach, takich jak na przykład Node.js.

0:12Jest to zatem częścią samego języka JavaScript.

0:15Gdybyśmy chcieli odczytać sobie aktualną datę,

0:18taką jak mamy ustawioną w systemie, to możemy utworzyć sobie taką stałą now czyli

0:22teraz i skorzystać z takiego konstruktora new Date.

0:26Czyli w ten sposób robimy to w języku JavaScript.

0:28I to co się wydarzy, to do tej stałej new zostanie zwrócony obiekt, który ma różne

0:33metody, dzięki którym będziemy mogli odczytać np.

0:36jaka była wtedy godzina, kiedy ta linijka

0:38się wykonała, jaki był dzień, jaki był miesiąc, jaki rok itd.

0:44Jeżeli sobie to zapiszę to w konsoli przeglądarki będziemy mieli dostęp do tego

0:47now i będę mógł Ci pokazać, że mamy np.

0:50taką metodę jak getDate i ona nam zwraca dzień miesiąca, czyli dzisiaj mamy

0:55pierwszy, a więc zwraca nam 1 i to co jest zwrócone

0:58jest to oczywiście typ number, czyli w języku JavaScript

1:00gdybyśmy chcieli możemy na tych liczbach dokonywać jakichś operacji, np.

1:05arytmetycznych.

1:06To jest zwrócenie dnia.

1:08Następnie możemy sobie zwrócić month, czyli pobierz mi miesiąc,

1:12natomiast tutaj jedna kluczowa uwaga, miesiące w przypadku daty są indeksowane

1:17od zera, czyli styczeń to będzie zero, luty to będzie 1

1:21i dzisiaj mamy pierwszy marca, więc będzie tutaj zwrócona dwójka.

1:24A więc żeby zobaczyć, który mamy tak

1:26naprawdę miesiąc, to dodalibyśmy sobie tutaj jedynkę i wtedy trzeci oznacza marzec.

1:30No i mamy jeszcze taką metodę jak np.

1:32getFullYear.

1:35Zwróci nam to rok również jako number.

1:37Możemy sobie tutaj pobrać jeszcze jakieś

1:39inne rzeczy, takie jak getHours, która jest godzina itd.

1:42Więc również będzie getMinutes

1:47i jak widzisz getMilliseconds

1:49natomiast to co jest ważne

1:53tutaj coś źle wpisałem, ok,

1:56to co jest ważne to wszystkie te rzeczy, które pobieram

1:59one nie są jakby na żywo tzn.

2:01jeżeli teraz zapytam, która jest godzina to nie zwróci mi tej godziny, która jest

2:05teraz, ale ta, która była w momencie kiedy został utworzony ten obiekt.

2:09Czyli my tutaj pracując z konsoli mamy można powiedzieć np.

2:12po minucie nieaktualne te dane. Ale zazwyczaj w kodzie będzie tak, że po

2:15prostu tworzymy sobie np. taką stałą i od razu coś na niej robimy, więc ona wtedy będzie

2:19reprezentować dokładnie ten czas, w którym wykonał się nasz kod.

2:23Wiemy zatem jak odczytywać datę, a teraz

2:25jak moglibyśmy sobie ją wyświetlić, jak ją sformatować.

2:29Powiem Ci, że jeżeli nie zależy Ci na tym, żeby to formatowanie było spójne,

2:33to możesz zrobić coś takiego, że odwołujesz się do tego obiektu daty i

2:37następnie do takiej właściwości jak toLocaleDateString.

2:42I zauważ, że mi to zwróciło w ten sposób

2:44ale dlatego, że mam w systemie ustawiony język angielski, więc wygląda to tak.

2:49Ale jeżeli byśmy sobie tutaj podali jako string taki locale w przypadku polskiego

2:53wygląda to tak, to zostanie zwrócone coś takiego.

2:55Więc jeżeli gdzieś na stronie będziesz chciał np.

2:57wyświetlić sobie aktualną datę możesz

2:59skorzystać z czegoś takiego jak toLocaleDateString i w zależności od języka

3:04użytkownika będzie to mogło trochę inaczej wyglądać.

3:06Niemniej jednak powinno to być według jego języka dla niego czytelne i zrozumiałe.

3:11Natomiast jeżeli chciałbyś zawsze sformatować datę w ten sam sposób, to

3:15musimy sobie pobrać jej poszczególne komponenty, takie jak np.

3:18dzień, miesiąc itd.

3:20I pokażę Ci jak możemy to zrobić.

3:22Utworzymy sobie taką stałą jak formatted, czyli sformatowany ciąg

3:26i ja tutaj skorzystam z Template String,

3:28żebyśmy mogli sobie interpolować pewne rzeczy.

3:30Czyli będę chciał się najpierw odwołać do

3:32daty i następnie do getDate, czyli pobrać sobie dzień miesiąca.

3:36Bo chciałbym sformatować to w ten sposób żeby mieć np.

3:38pierwszy albo 01. 03. 2021.

3:43Coś takiego chcemy uzyskać, więc getDate zwróci nam w tym przypadku 1.

3:47Teraz jeszcze do tego wrócimy.

3:49Potem sobie wpiszę literalnie kropkę,

3:51odwołam się do now.getMonth, ale +1 , bo pamiętajmy, że to nam zwraca

3:56od zera i następnie kropka i zrobimy sobie now.getFullYear w ten sposób i

4:02wyświetlimy sobie w konsoli właśnie ten string.

4:09Zobaczmy jak to będzie wyglądać. Wygląda to tak.

4:11No i teraz pozostaje kosmetyka.

4:13Jeżeli chciałbyś tutaj na początku dodać 0 to możemy to zrobić w łatwy sposób,

4:18czyli powiedzmy do tej jedynki też chcielibyśmy to dodać.

4:21Powiem Ci, że na stringach w języku

4:23JavaScript mamy taką metodę jak padStart, czyli np.

4:26jeżeli miałbym taki string jak powiedzmy raz, dwa trzy

4:29i skorzystam na nim z metody padStart, to na początku podaję jaka ma być

4:34maksymalna długość tego stringu, powiedzmy, że 6 i potem co chcę dodać na początku np.

4:390 i zauważ jak to się zachowa.

4:41Sprawi to, że ten string zostanie rozwinięty do 6 sześciu znaków, a skoro

4:45były tylko 3 to 0 które podałem w tym miejscu doda na początku trzy razy.

4:49Gdybym tutaj miał string 1, 2, 3, 4 to tylko dwa zera zostałyby dodane.

4:53Więc jeżeli mielibyśmy taki string jak np.

4:551 czyli miesiąc 1 i powiem, że chcę

4:58na początku powiem, że ma mieć on długość dwóch znaków

5:03i na początku chcę dodać 0 to doda mi to 0.1,

5:06natomiast jeżeli miałbym miesiąc 12 czy dzień 12 to to 0 w ogóle nie zostanie

5:10dodane, bo ten string od początku ma już taką długość jak tutaj zadeklarowaliśmy.

5:15Natomiast problem jest taki, że my mamy zwrócony number i jeżeli na liczbie nawet

5:19jak byśmy ją tak opletli chcielibyśmy zrobić padStart to tam taka metoda nie istnieje.

5:24Więc najpierw liczbę musimy w ten sposób zamienić na string podając tutaj np.

5:29jedynkę i wtedy na tym możemy zrobić padStart

5:32powiedzmy 2, 0 i to nam to sformatuje w taki sposób.

5:35Czyli dokładnie taki zapis będę chciał sobie zastosować.

5:38A więc możemy to albo zrobić tutaj,

5:41wpisać tutaj po prostu string, zamienić to na string i następnie zrobić

5:45to patStart albo możemy skorzystać sobie z funkcji.

5:48Czyli utworzymy funkcję, która nam to po prostu zrobi

5:51i będzie to bardziej czytelne.

5:52Nazywam funkcję addZero, przekażemy tutaj jakąś

5:55wartość liczbową i stąd po prostu zwrócimy.

5:58Zamieniamy tę wartość liczbową na string i na tym stringu wykonujemy padStart.

6:03Chcemy, żeby on miał maksymalnie 2 znaki i żeby na początku zostało dodane 0.

6:07To również możesz podać jako string tutaj

6:09dokładnie nie ma to żadnego znaczenia.

6:12OK, i skoro mamy teraz taką fajną funkcję to ja będę chciał z tej

6:15funkcji tutaj skorzystać addZero i po prostu przekażemy jej dzień miesiąca,

6:20w tym przypadku dzisiaj zwraca nam to 1,

6:22tutaj też zrobimy addZero i przekażemy sobie miesiąc.

6:27No i w przypadku roku już tego robić nie musimy.

6:29Zobacz, że teraz będzie to wyglądać w następujący sposób.

6:33Jeżeli natomiast chciałbyś wyświetlić powiedzmy 01. 03. 2021, to tutaj

6:38musielibyśmy również do tego stworzyć sobie jakąś funkcję.

6:41Mogę Ci to również pokazać.

6:42Stwórzmy sobie taką funkcję jak convertMonth, czyli żeby przekonwertować sobie

6:48liczbę na odpowiednie słowo i powiedzmy, że tutaj będzie przekazywane value.

6:52Musimy sobie stworzyć taką mapę, którą ja teraz tutaj wkleję.

6:56Zobacz, stworzylibyśmy sobie obiekt, który ma pod kluczem 1 i styczeń, a więc jeżeli

7:01byśmy się odwołali do tego obiektu pod Month i przekazali 1 to zwróci mi styczeń.

7:05Jeżeli przekaże 2 zwróci mi luty, więc pod

7:08to value do tej funkcji będziemy przekazywać właśnie 1, 2, 3 itd.

7:11A więc stąd wystarczy zwrócić month value. I teraz tą linijkę sobie skopiuje i

7:18wykomentuje i będziemy chcieli pozbyć się tych kropek.

7:24Natomiast w miejscu, w którym mieliśmy

7:25miesiąc to zamiast addZero to zrobimy sobie convertMonth.

7:31Mam nadzieję, że to rozumiesz.

7:32Czyli wywołujemy funkcję convertMonth i jej przekazujemy pobrany miesiąc,

7:36w tym przypadku mi teraz zwraca 2

7:37dodaje do tego 1, czyli przekaże do tej funkcji 3.

7:40Pod value znajdzie się 3

7:42i następnie odwołamy się do obiektu month podając 3, a to zwróci mi string marzec,

7:47który zostanie podstawiony za całe to wyrażenie.

7:49Więc zobaczmy. Teraz będzie to wyglądać następująco.

7:53Jak zatem widzisz, date możemy pobrać w

7:55ten sposób tworząc nowy obiekt poprzez new Date i następnie poprzez różne metody

8:00możemy się odwoływać do poszczególnych wartości i sformatować je jak chcemy.

8:04Natomiast jeżeli chcesz je sformatować w

8:06jakiś domyślny sposób, możesz skorzystać z toLocalesDateString.