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:


const 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 znajdziesz tutaj.

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


const 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>

const currentDate = new Date();
const 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 leadingZero(i) {
    return (i < 10)? '0'+i : i;
}

const currentDate = new Date();
const 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>

const currentDate = new Date();
const 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>

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

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 leadingZero(i) {
    return (i < 10)? '0'+i : i;
}

function showTextTime() {
    const currentDate = new Date();
    const days = ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"];
    const textDate = leadingZero(currentDate.getDate()) + "." + leadingZero((currentDate.getMonth()+1)) + "." + currentDate.getFullYear() + " - " + days[currentDate.getDay()];
    const 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>

const currentDate = new Date();
const currentHour = currentDate.getHours();
const 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 nockę. 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:


const 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>

const aDate = new Date(2008,4,12,15,24,18,500);
const 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.

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


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

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

const 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>

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

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

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

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

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

    //musimy tutaj sprawdzić, czy powyższa zmienna nie jest 0,
    //bo inaczej poniżej byśmy mieli % 0 czyli dzielenie przez 0
    if (daysToDate < 1) {
        daysToDateFix = 1;
    } else {
        daysToDateFix = daysToDate;
    }

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

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

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

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

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

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

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

showCount();

Alternatywą dla naszej funkcji leadingZero() jest metoda padStart() która poprzedza dany string danym tekstem do czasu aż osiągnie on zadaną długość:


const nr = 2;
console.log(nr.padStart(2, "0")); //02
console.log(nr.padStart(4, "-")); //---2

Jej przeciwieństwem jest padEnd() który dodaje znaki na końcu stringa:


const nr = 2;
console.log(nr.padEnd(2, "0")); //20
console.log(nr.padEnd(4, "-")); //2---