16 sierpnia, 2013 
Dominik-W 
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ę.
Opublikowano w 
Tags: 
