JavaScript: Parsowanie daty

0:00Skoro wiesz już jak pobrać aktualną datę,

0:02to w tej lekcji pokażę Ci jak możemy parsować datę.

0:05Czyli możemy mieć gdzieś informację w formie np.

0:07string o jakiejś dacie i chcemy właśnie taki string zamienić na obiekt daty, z którego

0:12będziemy mogli tak jak w lekcji poprzedniej wyciągać sobie jakieś dane np.

0:16który to był rok, który dzień, miesiąc itd.

0:18Czyli nie chcemy pracować z aktualną datą,

0:21ale ze string zrobić obiekt daty i wtedy dopiero na nim pracować.

0:25Więc jak możemy to zrobić?

0:27Możemy sobie utworzyć taką stałą, którą nazwiemy np.

0:30date i napiszemy new Date i okazuje się,

0:34że tutaj jeżeli nic nie zrobimy to pobierzemy aktualną datę.

0:37Natomiast jeżeli podamy tutaj string to

0:39będziemy mogli sparsować ten string i z niego zostanie utworzona data.

0:43Natomiast jak się domyślasz tutaj nie

0:44możemy wpisać czegokolwiek tylko taki string, który będzie działał.

0:47Więc jeżeli chciałbym wpisać np.

0:4927. 03. 2021

0:52dla nas Polaków jest to data, która ma jakiś sens,

0:55natomiast zobaczmy czy przeglądarka sobie z tym poradzi.

0:58Odwołam się do Date i widzimy Invalid Date.

1:01Czyli nie jest w stanie z tego sparsować.

1:02Natomiast jeżeli bym wpisał w takiej notacji jaka jest np.

1:05w Ameryce napisali byśmy tutaj miesiąc czyli powiedzmy 03/27/2021

1:12zobaczmy teraz pod date.

1:13Okazuje się, że ta data jest już poprawnie wyświetlana.

1:16Swoją drogą jak ją po prostu wyświetlasz w konsoli to jest na niej robione toString

1:20i wtedy taki string się pokazuje. Więc jest na datach również taka metoda.

1:25Więc teraz co tutaj wpisywać żeby było ok?

1:27Możemy wpisać właśnie taką notację.

1:29Możemy również wpisać to w ten sposób np.

1:3127 march 2021

1:34czyli po angielsku, też będzie ok.

1:36Niemniej jednak powiem Ci, że zazwyczaj parsujemy datę, która jest w formie

1:40takiego dłuższego stringu i ona do nas może być przysłana w różny sposób.

1:44Na przykład możemy pobierać jakieś dane za pomocą

1:46Ajax z użyciem notacji JSON

1:49czyli dane z serwera pobieramy

1:51i wtedy tam ta data powiedzmy przy jakimś wpisie albo przy liście użytkowników kiedy

1:55użytkownik był zarejestrowany ta data będzie w nieco innym formacie.

2:00I teraz to co jest ważne, żeby w języku JavaScript wszystko działało poprawnie w

2:04każdej przeglądarce, również w tych mobilnych

2:06zawsze zadbaj o to albo poproś osobę,

2:09która pracuje nad kodem serwerowym, żeby dane, które Ty będziesz musiał na

2:13front-endzie, czyli z użyciem kodu JavaScript wyświetlić

2:16jeżeli chodzi o datę, aby ta data była

2:18sformatowana w formacie ISO 8 6 0 1. Wtedy tak wynika z mojego doświadczenia

2:24wszystko będzie ok. I zobacz co zrobiłem w pliku index.

2:27Dodałem sobie tutaj taki liniowy skrypt z promocją.

2:31Powiedzmy, że mamy na stronie jakąś promocję i taki skrypt

2:34czyli ten fragment jest generowany na

2:36serwerze i tutaj byśmy z serwera mówiąc brzydko wypluli taką datę i do tej daty

2:41chcemy się odwołać z użyciem kodu JavaScript i właśnie jakoś ją móc sformatować.

2:46I to jest właśnie format ten ISO 8601.

2:50Czyli pamiętaj o tym, że jeżeli pracujesz

2:53z datami to żebyś taki string właśnie w takim formacie otrzymywał.

2:57Bo okazuje się, że jak tutaj będzie inny format i to przekażemy sobie do newDate to będzie to

3:02działać we wszystkich np. przeglądarkach desktopowych

3:05ale na iPhonie w przeglądarce Safari będziesz miał już problem.

3:08I to jest problem, na który ja się natknąłem.

3:10Przekazywany string nie parsował się do

3:12odpowiedniej daty, a co za tym idzie licznik promocji, który wyświetlałem

3:16nie działał poprawnie. I z tego właśnie powodu należy zadbać aby z serwera ta data

3:20zawsze była zwracana w takim formacie ISO 8601.

3:24To jest dokładnie ten format i teraz spróbujmy się do niego odwołać.

3:27Skoro utworzyłem taką globalną stałą to w naszym kodzie możemy się odwołać do

3:31promotion kropka endsAt i sobie to po prostu odczytamy.

3:35Więc jeżeli teraz będę chciał utworzyć na

3:37tej podstawie datę, może zróbmy sobie const promotionEndsAt

3:43i zrobimy new Date i odwołamy się właśnie do tej globalnej

3:48stałej PROMOTION.endsAt, co za tym idzie dokładnie ten string, który tutaj jest

3:54można powiedzieć, że wstawiamy w to miejsce.

3:56Ja go tutaj nie wklejam bezpośrednio,

3:57tylko pokazałem taki przykład, żebyś wiedział, że czasami właśnie w kodzie HTML coś z

4:01serwera tutaj może być wstawione i aby zadbać o odpowiedni format.

4:05Zobaczmy.

4:06I teraz jeżeli sobie wyświetlimy to promotionEndsAt to widzimy, że jest tutaj

4:10poprawna data łącznie oczywiście z odpowiednim time zone itd.

4:15Jeżeli chodzi o tworzenie daty może to ściśle nie jest związane z samym

4:19parsowaniem, ale można również date tworzyć w trochę inny sposób.

4:22Czyli jak robimy new Date to mogliśmy nic nie przekazywać tutaj.

4:25Wtedy pobieramy aktualną datę, możemy

4:27przekazać string, który będzie sparsowany i jak widzisz działają różne formaty.

4:32Taki format jest ok, ale taki jak przekazaliśmy tutaj też jest ok.

4:35Natomiast możemy również podać więcej

4:37parametrów do tego konstruktora new date i pokaże Ci to

4:40teraz. Powiemy sobie date2 i zrobimy new Date.

4:46I tutaj można podawać parametry o typie number, które mówią nam kolejno rok,

4:51możemy podać, że chcemy utworzyć datę w roku 2000 np.

4:54o godzinie zero albo w zasadzie to będzie miesiąc.

4:58Przepraszam, czyli tutaj będzie

5:00miesiąc styczeń i np. godzina dwunasta.

5:03I zobaczmy sobie teraz, co nam zwróci datę. 2.

5:06Dokładnie tak jak wspomniałem jest to taka data.

5:09OK, tutaj jeszcze źle ci powiedziałem.

5:11To jest rok, miesiąc i dzień.

5:14Czyli to jest 12 dzień tego miesiąca.

5:16To jeszcze nie jest godzina.

5:17I wygląda to tak jest to środa, jak

5:20widzisz styczeń 12 roku 2000 czy 2000 i godzina jest ustawiona na 00.

5:26Natomiast dalej możemy podawać godzinę.

5:28Czyli możemy powiedzieć np.

5:2915 minut 10 i powiedzmy 5 sekund.

5:33Zobaczmy jak to będzie wyglądać.

5:35Date 2

5:3715:10:5 sekund i również możemy podać tutaj milisekundy, czyli nie więcej

5:41oczywiście niż 1000, powiedzmy 500 milisekund, czyli pół sekundy.

5:45Moglibyśmy to ustawić w ten oto sposób.

5:47Zobaczmy, to się już tutaj nie wyświetli.

5:49Niemniej jednak na tej dacie jest to ustawione i gdybyśmy się odwołali do

5:53date2 i np. getMilliseconds, to oczywiście zostałoby to poprawnie zwrócone.

5:58A więc jeszcze raz tutaj, już tym razem bez pomyłek, mam nadzieję.

6:01Rok, następnie miesiąc, dzień, godzina, minuta, sekunda i milisekundy.

6:07I na koniec powiem Ci jeszcze tylko o tym, że na obiekcie daty, czyli zwróconym

6:12takiego new Date, możemy również ustawiać wartości nie tylko tworząc go.

6:16Czyli jeżeli na tym obiekcie date2 chciałbym zmienić rok to możemy powiedzieć

6:19date2.setFullYear i ustawili byśmy tutaj rok np.

6:262001.

6:27Więc podobnie będzie z setMonth, setDate

6:30to będzie ustawienie dnia, setMilliseconds itd.

6:33Czyli tak jak mieliśmy w lekcji poprzedniej np.

6:36getDate no to tutaj będzie setDate. A więc

6:38tylko ten przedrostek się zmienia i na obiekcie daty możesz go modyfikować jeżeli

6:42będziesz potrzebował właśnie w taki sposób.

6:45Podsumowując zapamiętaj jedną najważniejszą rzecz.

6:47Jeżeli będziesz miał np.

6:49z serwera pobrane dane gdzie będzie data i chcesz mieć pewność, że ta data będzie

6:53zawsze poprawnie sparsowana w języku JavaScript, zadbaj o to, żeby ta data

6:57wyglądała tak jak tutaj, czyli była w formacie ISO 8601.