
Czas leci, więc opiszemy teraz obsługę daty i czasu w JavaScript. Dziś mniej teorii, więcej przykładów praktycznych.
Data i czas w JavaScript. Obiekt Date.
Do obsługi dat w JavaScript służy obiekt Date.
Przykład podstawowy:
var data = new Date(); document.write(data.getDate());
Metody obiektu Date:
data.getDay(); // numer dnia 0-6 data.getFullYear(); // 1000-9999 data.getHours(); // bieżąca godzina na komputerze data.getMiliseconds(); // liczba milisekund data.getMinutes(); // minuty data.getMonth(); // miesiące (0-11) data.getSeconds(); // sekundy // konwersja na czytelny łańcuch: data.toDateString(); data.toLocaleDateString(); data.toLocaleString(); date.toString();
Tip / wskazówka – użycie instanceof
Ten operator pozwala nam określić, czy mamy do czynienia z obiektem danego typu. Możemy zatem sprawdzić, czy operujemy właśnie na obiekcie typu Date:
var moja_data = new Date(); alert(moja_data.getDate()); // czy moja_data jest instancja obiektu Date? alert(moja_data instanceof Date);
Ustawianie daty
Tworząc obiekt typu Date, możemy podać (ustawić) datę, i to na kilka sposobów:
var today = new Date(); var birth = new Date("March 27, 1986 05:24:00"); alert(birth); // lub var birth = new Date(1986,03,27); var birth = new Date(1986,03,27,5,24,0);
Jak widać możemy ustawić tylko datę, lub datę i godzinę. Możemy także ustawić datę poprzez dedykowane metody:
var dt = new Date(); dt.setFullYear(2012,02,12);
Ustawiliśmy rok, miesiąc, dzień.
Natomiast w poniższym kodzie …
var dt = new Date(); dt.setDate(dt.getDate() + 10);
… ustawiamy datę przyszłą – o 10 dni do przodu.
Inne przykłady
Przykład – pomiar czasu wykonania:
var start = Date.now(); // kod dla ktorego chcemy wykonać pomiar alert('test'); // ... var stop = Date.now(); var roznica_czasow = stop – start; // czas w milisekundach
Przykład – porównanie dat używając obiektu Date:
var cmpDate = new Date(); cmpDate.setFullYear(2020,2,25); var today = new Date(); // porównanie if (cmpDate > today) { alert("Data przyszła"); } else { alert("Data przeszła"); }
W powyższym kodzie porównujemy datę dzisiejszą z tą ustawioną w zmiennej cmpDate.
Przykład – aktualna godzina:
function getTime() { var teraz = new Date; var wynik = teraz.getHours() + ":" + teraz.getMinutes(); return(wynik); } alert("Jest godzina " + getTime());
Przykład – proste budowanie czytelnej daty:
var tm = new Date(); var wynikTxt = ''; wynikTxt += "Mamy teraz godzinę " + tm.getHours() + ":" + tm.getMinutes() + ":" + tm.getSeconds() + ", "; wynikTxt += "Dnia: " + tm.getDate() + "." + (tm.getMonth() + 1) + "." + tm.getFullYear(); alert(wynikTxt);
W przypadku getMonth() dodaliśmy do wyniku 1. A to dlatego, że metoda ta zwraca numery miesięcy o 1 mniejsze – zaczynając od 0. To już taka cecha JS.
Jest jeszcze inna kwestia – formatowanie. To co wyświetli nam instrukcja alert(wynikTxt); będzie wyglądać mniej więcej tak:
„Mamy teraz godzinę 21:47:3, Dnia: 16.8.2013″
Przydatne było by dodanie tutaj brakujących znaków zer, aby napis wyglądał jak tutaj:
Mamy teraz godzinę 21:47:03, Dnia: 16.08.2013
Po prostu dodajemy warunki do kodu generującego napis końcowy, np.:
if (minute < 10) minute = "0" + minute;
Taki kod zobaczymy w następnym, odrobinę bardziej rozbudowanym przykładzie.
Przykład – funkcja wyświetlająca datę i czas w języku polskim:
function pokazCzas() { var monthsArr = ["stycznia", "lutego", "marca", "kwietnia", "maja", "czerwca", "lipca", "sierpnia", "września", "października", "listopada", "grudnia" ]; var daysArr = ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"]; var dateObj = new Date(); var year = dateObj.getFullYear(); var month = dateObj.getMonth(); var numDay = dateObj.getDate(); var day = dateObj.getDay(); var hour = dateObj.getHours(); var minute = dateObj.getMinutes(); var second = dateObj.getSeconds(); if (minute < 10) minute = "0" + minute; if (second < 10) second = "0" + second; var output = daysArr[day] + ", " + numDay + " " + monthsArr[month] + " " + year + " roku, godzina " + hour + ":" + minute + ":" + second; return output; } alert(pokazCzas());
Powyższy kod wyświetli wynik w postaci:
„Piątek, 16 sierpnia 2013 roku, godzina 22:00:57”
To właściwie kompletny przykład kodu wyświetlającego datę i czas. Ilustruje też jak operować na wartościach zwracanych przez metody obiektu Date.
Czas i użycie Timer’ów
Funkcja setTimeout()
Tutaj krótko powiemy o odliczaniu czasu, a także o tym jak nakazać wykonanie kodu za jakiś czas, czyli funkcja setTimeout():
// wykonaj za 4 sek. setTimeout(function() { alert("Foobar!") } , 4000);
Jest to czasami bardzo przydatne, np. gdy chcemy wywołać kod z biblioteki, która w tym momencie jeszcze nie jest całkowicie załadowana, lub funkcję, która musi czekać na wynik pracy innej części kodu. Wtedy potrzebujemy wywołać nasz kod z małym opóźnieniem, aby wszystko zadziałało na galowo.
Funkcja setInterval()
Oprócz tego możemy zaprogramować wykonanie kodu co jakiś czas, używając funkcji setInterval():
var odliczanie = 5; var timer = setInterval( function() { odliczanie--; if (!odliczanie) { clearInterval(timer); } alert("Odliczanie: " + odliczanie); }, 2000); // co ile - 2000 [ms] = 2 [s]
Funkcja podana w setInterval wykona się 5 razy, co 2 sekundy (2000 ms), po czym przerwie odliczanie.
Kolejne przykłady
Przykład – obliczanie różnicy czasu – ile upłynęło pomiędzy datami:
var dt_in = new Date(2007, 02, 11, 23, 59, 59); var now = new Date(); var time = now.getTime() - dt_in.getTime(); var days = Math.floor(time / (1000 * 60 * 60 * 24)); if (days > 0) { alert("Od podanej daty minęło " + days + " dni"); } else { alert("Podana data nie miała jeszcze miejsca"); }
Przykład – obliczanie wieku w JavaScript:
Najpierw proste UI w postaci formularza HTML:
<body> <form> Miesiac: <input type="text" id="b-month" /> Dzien: <input type="text" id="b-day" /> Rok: <input type="text" id="b-year" /> <button onclick="getAgeFromBirthday()">Podaj wiek</button> </form> </body>
Kod obsługi:
function getAgeFromBirthday() { var month = document.getElementById('b-month').value; var day = document.getElementById('b-day').value; var year = document.getElementById('b-year').value; var b_date = new Date(year, month, day); if (b_date.getDate() != day || b_date.getMonth() != month || b_date.getFullYear() != year) { alert('Prosze podac poprawna date urodzenia'); return false; } today = new Date(); today.setHours(0); today.setMinutes(0); today.setSeconds(0); if (b_date > today) { alert('Data musi być wcześniejsza od dzisiejszej'); return false; } alert(Math.floor((today - b_date) / 31556952000)); }
Pobieramy tutaj datę urodzenia od użytkownika i przetwarzamy. Wynikiem jest wiek użytkownika obliczony na podstawie podanej daty.
Słowo o datach i czasie w bibliotekach JavaScriptu
Używając framework’ów JS, możemy się spodziewać, że udostępniają nam one różne ułatwienia i skróty. Dotyczy to również daty i czasu.
Na przykład jQuery daje nam metodę now():
jQuery.now(); // bez argumentów, zwraca aktualny czas
Metoda $.now() jest skrótem dla wyrażenia (new Date).getTime().
MooTools daje świetne możliwości operacji na datach i czasie używając minimum kodu (np.: metody date.get(), date.set(), date.clone() czy date.increment()).
Gdy potrzebujemy implementacji na przykład kalendarza z prawdziwego zdarzenia, możemy oczywiście pisać to rozwiązanie sami, w „czystym” JavaScript, lub z pomocą właśnie framework’ów JavaScript.
Ale czas ten można spożytkować lepiej, niż na wymyślaniu ponownie koła, i użyć sprawdzonych, gotowych i bardzo dobrych rozwiązań. Szczególnie polecam te oparte o biblioteki, jak:
– rozwiązanie MooTools DatePicker
Podsumowanie
W tym artykule poznaliśmy nie tylko obsługę daty i czasu w JavaScript, oraz wiele gotowych rozwiązań w przykładach, ale także typowe elementy programowania obiektowego (OOP), i to właśnie ten temat weźmiemy pod lupę w kolejnych artykułach.
Dociekliwym oczywiście polecam bardziej szczegółowy opis obiektu Date na stronach Mozilli.
A teraz czas… aby kończyć artykuł.
Dziękuję za uwagę.