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:

– Date Picker z jQueryUI

– 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ę.

Podaj dalej:

Facebook

2

Twitter

Linkedin

Tumblr

0

Digg

email

Pinterest

0