Obiekt Date

Javascript udostępnia nam gotowy obiekt Date() który umożliwia nam w łatwy sposób manipulowanie czasem oraz datami.
Aby wyświetlić na ekranie bieżącą datę jaka jest ustawiona w systemie klienta musimy utworzyć nowy obiekt:


var currentDate = new Date();
console.log(time);

co w rezultacie wyświetli nam ciąg znaków:

Pamiętaj, że jest do data z urządzenia danego użytkownika, a nie serwera. Może ona być inna u różnych użytkowników.

Podstawowe metody za pomocą których możemy w łatwy sposób formatować wygląd daty (najczęściej używane):

getDate() - zwraca dzień miesiąca (wartość z przedziału 1 - 31)
getDay() - zwraca dzień tygodnia (0 dla niedzieli, 1 dla poniedziałku, 2 dla wtorku itd)
getYear() - zwraca liczbę reprezentującą rok (dla lat 1900 - 1999 jest to 2-cyfrowa liczba np. 99, a dla późniejszych jest to liczba 4-cyfrowa np. 2002)
getFullYear() - zwraca pełną liczbę reprezentującą rok (np. 1999 lub 2000)
getHours() - zwraca aktualną godzinę (wartość z przedziału 0 - 23)
getMillisecond() - zwraca milisekundy (wartość z przedziału 0 - 999)
getMinutes() - zwraca minuty (wartość z przedziału 0 - 59)
getMonth() - zwraca aktualny miesiąc (0 - styczeń, 1 - luty itp.)
getSeconds() - zwraca aktualną liczbę sekund (wartość z przedziału 0 - 59)
getTime() - zwraca aktualny czas jako liczbę reprezentującą liczbę milisekund która upłynęła od godziny 00:00 1 stycznia 1970 roku

Wszystkie dostępne metody zobaczysz tutaj.

Przykładowe wyświetlenie godziny może mieć postać:


var currentDate = new Date();
console.log(time.getHours());

//lub krótszy zapis

console.log((new Date).getHours());

Wypisywanie sformatowanej daty na ekran

Skorzystajmy więc z powyższych metod aby nieco poprawić wygląd naszej daty:


<div id="test1"></div>

(function() {
    var currentDate = new Date();
    var element = document.querySelector('#test1');
    element.innerHTML = "Jest teraz czas: " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":"+currentDate.getSeconds() + "<br>";
    element.innerHTML += "Dnia: " + currentDate.getDate() + "." + (currentDate.getMonth()+1) + "." + currentDate.getFullYear();
})();

Powyższy skrypt wyświetla nam naszą datę w nieco bardziej dostępny sposób niż bez użycia metod. Do metody getMonth() dodaliśmy 1, ponieważ Javascript numeruje miesiące od 0.

Wszystko wygląda już w miarę dobrze. Jednak wciąż możemy poprawić pewne szczegóły. Wartości reprezentujące dany czas - np. minuty, sekundy lub miesiące są przedstawiane jako jednocyfrowe liczby jeżeli ich wartość jest mniejsza od 10. W normalnych zegarkach stosuje się zapis dwucyfrowy.
Wniosek jest bardzo prosty - naszemu zapisowi brakuje zer wiodących.


<div id="test2"></div>

(function() {
    function leadingZero(i) {
        return (i < 10)? '0'+i : i;
    }

    var currentDate = new Date();
    var element = document.querySelector('#test2');

    element.innerHTML = "Jest teraz czas: ";
    element.innerHTML += leadingZero(currentDate.getHours()) + ':' + leadingZero(currentDate.getMinutes()) + ':' + leadingZero(currentDate.getSeconds())    + '<br>'
    element.innerHTML += "Dnia: " + leadingZero(currentDate.getDate()) + "." + leadingZero(currentDate.getMonth()+1) + "." + currentDate.getFullYear();
})();

Funkcja leadingZero() wymaga podania w parametrze liczby i gdy ta jest mniejsza od 10 wówczas dopisuje do niej 0.

Dzień tygodnia

Jak już wiemy aby wypisać dzień tygodnia musimy skorzystać z metody getDay().


<div id="test3"></div>

(function() {
    var currentDate = new Date();
    var element = document.querySelector('#test3');
    element.innerHTML = "Dzisiaj jest dzień tygodnia: " + currentDate.getDay(); //pamiętajmy, że dni tygodnia liczone są od 0
})();

Numer tygodni w postaci liczby nie wygląda zbyt elegancko. Ale i to się da naprawić - wystarczy zastosować odpowiednio przygotowaną tablicę. Wystarczy teraz pobrać wartość tablicy podając w indexie numer dnia:


<div id="test4"></div>

(function() {
    var currentDate = new Date();
    var days = ["Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota", "Niedziela"];

    document.querySelector('#test4').innerHTML = "Dzisiaj jest dzień tygodnia: " + days[currentDate.getDay()];
})();

Dynamiczne wypisywanie czasu

Wiedząc już jak się wypisuje aktualną datę oraz aktualny dzień tygodnia możemy napisać skrypt, który będzie to robił dynamicznie.


<div id="fCzas"></div>
<div id="fData"></div>

(function() {
    function leadingZero(i) {
        return (i < 10)? '0'+i : i;
    }

    function showTextTime() {
        var currentDate = new Date();
        var days = ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"];
        var textDate = leadingZero(currentDate.getDate()) + "." + leadingZero((currentDate.getMonth()+1)) + "." + currentDate.getFullYear() + " - " + days[currentDate.getDay()];
        var textTime = leadingZero(currentDate.getHours()) + ":" + leadingZero(currentDate.getMinutes()) + ":" + leadingZero(currentDate.getSeconds());


        document.querySelector('#fData').innerHTML = textDate;
        document.querySelector('#fCzas').innerHTML = textTime;

        setTimeout(function() {
            showTextTime()
        }, 1000);
    }

    showTextTime();
})();

Cała sztuczka polega na cyklicznym wywoływaniu funkcji, która pobiera datę, a następnie wypisuje ją do odpowiednich pól. Cykliczne wywoływanie co 1s wykonujemy przy pomocy funkcji setTimeout('nazwaFunkcji()', czas_w_ms).

Tekst w zależności od czasu

Poznane powyżej metody można wykorzystać do wypisywania odpowiedniej treści w zależności od aktualnego czasu. Wystarczy sprawdzić aktualny znacznik czasu (dni, godziny, minuty itp.) i w zależności od jego wartości wypisywać odpowiednią treść. Poniższy skrypt przedstawia przykładowe zastosowanie tej metody:


<div id="test5"></div>

(function() {
    var currentDate = new Date();
    var currentHour = currentDate.getHours();
    var element = document.querySelector('#test5');
    if (currentHour > 0 && currentHour < 6) element.innerHTML = "Ojej - to był jednak tylko sen?...";
    if (currentHour >= 6 && currentHour < 9) element.innerHTML = "Zaczyna się kolejny dzień";
    if (currentHour >= 9 && currentHour < 19) element.innerHTML = "Kolejny piękny dzionek";
    if (currentHour >= 19 && currentHour < 23) element.innerHTML = "No to mamy nocke. Witamy w świecie snu ;)";
})();

Ustawianie Daty i Czasu - metoda 1

W powyższych skryptach za pomocą odpowiednich metod pobieraliśmy aktualną datę i czas. Javascript udostępnia nam także zestaw metod, za pomocą których możemy ustawiać czas i datę. Ustawienie takie nie wpływa w żaden sposób na systemowy zegar i kalendarz - działa ono tylko w obrębie skryptu Javascript. Aby ustawić datę i czas możemy skorzystać z dwóch sposobów.

Pierwszym z nich polega na podaniu w nawiasach obiektu Date() poszczególnych składowych czasu. Kolejność wprowadzanych danych to:
rok, miesiąc, dzień, godzina , minuta, sekunda, milisekunda:


var time = new Date(2008,4,12,15,24,18);

ustawi nam datę obiektu dzisiaj na:

  • rok - 2008,
  • miesiąc - 4 (maj),
  • dzień - 12,
  • godzina - 15,
  • minuta - 24,
  • sekunda - 18

W powyższym przykładzie pominęliśmy parametr oznaczający milisekundy - nie chcemy być dokładni aż do przesady ^^.

Ustawiony znacznik możemy oczywiście odczytać:


<div id="test6"></div>

(function() {
    var aDate = new Date(2008,4,12,15,24,18,500);
    var text = aDate.getFullYear()+"." +aDate.getMonth()+ "." +aDate.getDate()+ " - " +aDate.getHours()+ ":" +aDate.getMinutes()+ ":" +aDate.getSeconds();
    document.querySelector('#test6').innerHTML = text;
})();

Ustawianie Daty i Czasu - metoda 2

Drugim sposobem ustawiania czasu i daty jest zastosowanie odpowiednich metod:

setYear() - ustawia dwie ostatnie cyfry roku,
setMonth() - ustawia miesiąc,
setDate() - ustawia dzień miesiąca,
setHours() - ustawia godzinę,
setMinutes() - ustawia minuty,
setSeconds() - ustawia sekundy,
setMilliseconds() - ustawia milisekundy.

Każda metoda ustawia tylko jeden element obiektu Date. Poza tymi metodami istnieją jeszcze dodatkowe metody do ustawiania czasu UTC.

Możemy np ustawić taki sam czas jak w przykładzie powyżej korzystając z poszczególnych metod::


<div id="test7"></div>

(function() {
    var currentDate = new Date();
    currentDate.setYear(2008);
    currentDate.setMonth(4);
    currentDate.setDate(12);
    currentDate.setHours(15);
    currentDate.setMinutes(24);
    currentDate.setSeconds(18);

    var text = currentDate.getFullYear() + "." + currentDate.getMonth() + "." + currentDate.getDate() + " - " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
    document.querySelector('#test7').innerHTML = text;
})();

Efekt tego skryptu jest identyczny jak efekt skryptu z metody 1 - różnica leży w długości skryptu.

Odliczanie

Spróbujmy napisać skrypt, który będzie odliczał dni do jakiegoś wydarzenia.

Na początku przeanalizujmy problem. Aby zrobić takie odliczanie, musimy obliczyć różnicę między datą z przyszłości a datą teraźniejszą. Pobieramy więc oba czasy (w ms), a następnie odejmujemy od siebie. Uzyskany wynik otrzymujemy w ms. Nas jednak interesuje liczba dni. Dzielimy więc wynik przez liczbę ms w dniu (czyli 24*60*60*1000). Dzięki temu uzyskujemy liczbę oznaczającą liczbę dni+resztę.
Aby wydobyć tą resztę, musimy od wyniku odjąć zaokrąglony wynik. Mając resztę możemy w podobny sposób obliczyć liczbę godzin, minut i sekund - wciąż posługując się podobną techniką.


<div id="test8"></div>

(function() {
    var leadingZero = function(element) {
        if (element < 10) return element = "0" + element;
        return element;
    }

    var showCount = function() {
        var currentYear = (new Date).getFullYear();
        var month = 10;
        var day = 29;
        var dateToday = new Date();

        //rok, miesiąc, dzień, godzina, minuta
        var uberImportantDate = new Date(currentYear, month-1, day, 9, 30);
        var msInADay = 24 * 60 * 60 * 1000; //1 dzień w milisekundach - to w nich przecież zwracany czas metodą getTime

        var timeDifference = (uberImportantDate.getTime() - dateToday.getTime());

        var eDaysToDate = timeDifference / msInADay;
        var daysToDate = Math.floor(eDaysToDate);

        //musimy tutaj sprawdzic, czy powyzsza zmienna nie jest 0,
        //bo inaczej ponizej bysmy mieli % 0 czyli dzielenie przez 0
        if (daysToDate < 1) {
            daysToDateFix = 1;
        } else {
            daysToDateFix = daysToDate;
        }

        var eHoursToDate = (eDaysToDate % daysToDateFix)*24;
        var hoursToDate = Math.floor(eHoursToDate);

        var eMinutesToDate = (eHoursToDate - hoursToDate)*60;
        var minutesToDate = Math.floor(eMinutesToDate);

        var eSecondsToDate = Math.floor((eMinutesToDate - minutesToDate)*60);
        var secondsToDate = Math.floor(eSecondsToDate);

        var tekst = 'Do moich kolejnych urodzin pozostało: '
                +daysToDate+' dni, '
                +hoursToDate+ ' godzin, '
                +minutesToDate+ ' minut i '
                +leadingZero(secondsToDate)+' sekund';

        var element = document.getElementById('test8');

        //jeżeli czas się skończył
            var timeDiff = uberImportantDate - dateToday;
            if (timeDiff < 0) {
                element.innerHTML = 'Czas minął';
            } else {
                element.innerHTML = tekst;

                setTimeout(function() {
                    showCount()
                }, 1000);
            }
        }
    }

    showCount();
})();