IT TUTORIJALI | jQuery

JavaScript - Datum i vrijeme (Date and Time)

Korištenje objekta Date (Date Object)

Objekt Date je ugrađeni JavaScript objekt. Omogućava vam da lokalno vrijeme korisnika utvrdite pristupom satu računarskog sistema putem pretraživača. Objekt Date (Date Object) takođe nudi nekoliko metoda za upravljanje, manipulaciju i oblikovanje datuma i vremena.

Kreiranje objekta datuma

Prije nego što počnemo raditi s datumom i vremenom, moramo stvoriti objekt Date. Za razliku od ostalih ugrađenih objekata, poput nizova ili funkcija, datumi nemaju odgovarajući literalni oblik. Sve objekte datuma treba kreirati pomoću funkcije konstruktora datuma koji je Date(). Postoje četiri različita načina za stvaranje objekta Date u JavaScript.

Nova sintaksa Date()

Možete jednostavno deklarisati novi Date objekt bez inicijalizacije njegove vrijednosti. U tom slučaju se vrijednost datuma i vrijemena postaviti na trenutni datum i vrijeme na korisnikovom uređaju na kojem se skripta izvodi.

var d = new Date();
document.write(d);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Kreiranje Date Object u JavaScript</title>
</head>
<body>
    <script>
    var d = new Date();
    document.write(d);
    </script>
</body>
</html>

Nova sintaksa datuma (godina, mjesec, ...)

Objekt Date takođe možete inicijalizovati dodavanjem sljedećih parametara odvojenih zarezima: godina, mjesec, dan, sati, minute, sekunde i milisekunde (eng. year, month, day, hours, minutes, seconds, and milliseconds). Potrebni parametri su godine i mjeseca (year and month), ostali parametri nisu obavezni.

var d = new Date(2020,10,12,14,35,20,50);
document.write(d);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Prosljeđivanje parametara u Date Object</title>
</head>
<body>
    <script>
    var d = new Date(2020,10,12,14,35,20,50);
    document.write(d);
    </script>
</body>
</html>

Ovaj datum zapravo predstavlja 12. novembar 2020. u 14:35:20 i 50 milisekundi. Možete zanemariti vremenski dio i ako želite odrediti samo datumski dio.

Nova sintaksa datuma (dateString)

JavaScript vam takođe omogućava stvaranje objekta Date dodavanjem stringa koji predstavlja datum ili datum i vrijeme, kao što je prikazano u sljedećem primjeru:

var d = new Date("12 November 2020");
document.write(d);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Konstrukcija objekt datuma prosljeđivanjem niza datuma</title>
</head>
<body>
    <script>
    var d = new Date("12 novembar 2020");
    document.write(d);
    </script>
</body>
</html>

Ovaj datum predstavlja 12. novembar 2020. Takođe možete odrediti stringove poput 12. novembra 2020. ili bilo koju od brojnih valjanih varijacija, JavaScript će to automatski obraditi.

Nova sintaksa datuma (milisekunde)

Objekt Date možete definisati i prosljeđivanjem broja milisekundi od 1. januara 1970. u 00:00:00 GMT. Ovo vrijeme je poznato kao UNIX epoha, jer je 1970. godina bilo formalno uvođenje operativnog sistema UNIX. Pogledajmo primjer:

var d = new Date(1517356800000);
document.write(d);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Definisanje objekta datuma prosljeđivanjem broja milisekundi</title>
</head>
<body>
    <script>
    var d = new Date(1517356800000);
    document.write(d);
    </script>
</body>
</html>

Gornji datum predstavlja srijedu, 31. januara 2018. 05:30:00 GMT + 0530. Nakon što stvorite instancu objekta Date, možete koristiti njegove metode za izvršavanje različitih zadataka, poput dobijanja različitih komponenati datuma, postavljanja ili mijenjanja pojedinačne vrijednosti datuma i vremena itd. Ove metode su detaljno opisane u sljedećem dijelu.

Napomena!

JavaScript nudi prečice nazvane "literali (literals)" za stvaranje većine izvornog objekta bez potrebe za upotrebom novog operatora, poput novog Object(), newArray() itd.

Dobijanje trenutnog datuma i vremena

Da biste dobili trenutni datum i vrijeme, stvorite novi Date objekt bez prolaska bilo kakvih parametara. Ovo će stvoriti objekt s trenutnim datumom i vremenom. Pogledajmo primjer:

var now = new Date();
alert(now); // Ispisivanje tačnog datuma i vremena

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje tačnog vremena i datuma</title>
</head>
<body>
    <script>
    var now = new Date();
    document.write(now); // Ispisivanje tačnog datuma i vremena
    </script>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Stvaranje stringova datuma i vremena

JavaScript Date objekt nudi nekoliko metoda, poput toDateString(), toLocaleDateString() itd. za generisanje stringova datuma u različitim formatima. Pogledajmo primjer:

var d = new Date();
alert(d.toDateString()); // Prikazuje skraćeni string datuma
alert(d.toLocaleDateString()); // Prikazuje lokalizovani string datuma
alert(d.toISOString()); // Prikazivanje ISO standardizovani string datuma
alert(d.toUTCString()); // Prikazivanje string datuma pretvorenog u UTC vrijeme
alert(d.toString()); // Prikazivanje punog stringa datuma sa lokalnom vremenskom zonom

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Generisanje Date Stringova</title>
</head>
<body>
    <script>
    var d = new Date();
    document.write(d.toDateString() + "<br>"); // Prikazuje skraćeni string datuma
    document.write(d.toLocaleDateString() + "<br>"); // Prikazuje lokalizovani string datuma
    document.write(d.toISOString() + "<br>"); // Prikazivanje ISO standardizovani string datuma
    document.write(d.toUTCString() + "<br>"); // Prikazivanje string datuma pretvorenog u UTC vrijeme
    document.write(d.toString()); // Prikazivanje punog stringa datuma sa lokalnom vremenskom zonom
    </script>
</body>
</html>

Slično tome, možete koristiti metode toLocaleTimeString(), toTimeString() objekta Date za generisanje vremenskih stringova, kao što je prikazano u sljedećem primjeru:

var d = new Date();
alert(d.toTimeString()); // Prikazivanje vremenskog dijela datuma
alert(d.toLocaleTimeString()); // Prikazuje lokalizovani vremenski string

Dobijanje određenih komponenati datuma i vremena

Jednom kada imate odgovarajući datumski objekt, dostupni su vam brojni načini za izdvajanje detalja iz njega, poput vrijednosti mjeseca, datuma, sati, minuta itd. Sljedeći dio opisuje različite metode izdvajanja pojedinih dijelova podataka iz Date objekt.

Dobijanje godine, mjeseca i datuma

Objekt Date pruža nekoliko metoda poput getFullYear(), getMonth(), getDay() itd. koje možete koristiti za izdvajanje određenih komponenati datuma iz objekta Date, kao što su: godina, dan u mjesecu, dan u sedmici itd. ... respektivno. Sljedeći primjer pokazuje kako dobiti određene komponente datuma iz objekta Date pomoću ovih metoda:

var d = new Date();
// Izdvajanje dijela datuma
alert(d.getDate()); // Ispisuje dan u mjesecu
alert(d.getDay()); // Prikažite broj dana u sedmici (0-6)
alert(d.getMonth()); // Prikažite broj mjeseci u godini (0-11)
alert(d.getFullYear()); // Prikažite cijelu godinu (četiri oznake)

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje godine, mjesea i dana iz aDate Object</title>
</head>
<body>
    <script>
    var d = new Date();
    // Izdvajanje dijela datuma
    document.write(d.getDate() + "<br>"); // Ispisuje dan u mjesecu
    document.write(d.getDay() + "<br>"); // Prikažite broj dana u sedmici (0-6)
    document.write(d.getMonth() + "<br>"); // Prikažite broj mjeseci u godini (0-11)
    document.write(d.getFullYear()); // Prikažite cijelu godinu (četiri oznake)
    </script>
</body>
</html>

Metoda getDay() vraća broj koji predstavlja dan u sedmici (od 0 do 6), umjesto da vraća ime poput nedjelje ili ponedjeljka na način da, ako je nedjelja, metoda vrati 0; a ako je ponedjeljak, metoda vraća 1 i tako dalje. Isto tako, metoda getMonth() vraća broj mjeseci (od 0 do 11) umjesto imena mjeseca. Ovdje 0 predstavlja prvi mjesec u godini. Zbog toga, ako je januar, metoda vraća 0, a ne 1, a ako je avgust, metoda vraća 7.

Dobijanje sati, minuta, sekundi i milisekundi

Slično tome, objekt Date pruža metode poput getHours(), getMinutes(), getSeconds(), getTimezoneOffset() itd. za izdvajanje vremenskih komponenti iz objekta Date.

var d = new Date();
// Izdvajanje vremenskog dijela
alert(d.getHours()); // Prikazivanje broja sati u danu (0-23)
alert(d.getMinutes()); // Prikazivanje broja minuta u satu (0-59)
alert(d.getSeconds()); // Prikazivanje sekundi u minutu (0-59)
alert(d.getMilliseconds()); // Prikazivanje broja milisekundi u sekundi (0-999)
alert(d.getTime()); // Prikazivanje broja milisekundi od 1.1.1970
alert(d.getTimezoneOffset()); // Prikazivanje pomaka vremenske zone (od Greenwich srednjeg vremena) u minutama

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje sate, minute i sekunde od Date Object</title>
</head>
<body>
    <script>
    var d = new Date();
    // Izdvajanje vremenskog dijela
    document.write(d.getHours() + "<br>"); // Prikazivanje broja sati u danu (0-23)
    document.write(d.getMinutes() + "<br>"); // Prikazivanje broja minuta u satu (0-59)
    document.write(d.getSeconds() + "<br>"); // Prikazivanje sekundi u minutu (0-59)
    document.write(d.getMilliseconds() + "<br>"); // Prikazivanje broja milisekundi u sekundi (0-999)
    document.write(d.getTime() + "<br>"); // Prikazivanje broja milisekundi od 1.1.1970
    document.write(d.getTimezoneOffset()); // Prikazivanje pomaka vremenske zone (od Greenwich srednjeg vremena) u minutama
    </script>
</body>
</html>

Metoda getHours() vraća broj sati u danu (od 0 do 23) prema 24-satnom satu. Dakle, kada je ponoć, metoda vraća 0; a kada je 15:00, vraća se 15.

Napomena!

Objekti Date takođe imaju metode za dobijanje UTC komponenti. Samo postavite UTC nakon get, poput getUTCDate(), getUTCHour(), getUTCMinutes() itd.

Postavljanje vrijednosti datuma i vremena

Pored dohvatanja vrijednosti datuma i vremena, ove vrijednosti možete postaviti ili izmijeniti i pomoću JavaScript. To se najčešće koristi u programu gdje morate promijeniti vrijednost datumskog objekta s određenog datuma ili vremena na drugi. Pogledajmo kako to funkcioniše.

Postavljanje godine, mjeseca i datuma

Objekt Date pruža metode poput: setFullYear(), setMonth() i setDate() za postavljanje komponente godine, mjeseca i datuma objekta Date. Na primjer, u sljedećem primjeru koristili smo metodu setFullYear() za promjenu trenutnog datuma pohranjenog u varijablu prije dvije godine u budućnosti.

var d = new Date();
d.setFullYear(d.getFullYear() + 2);
alert(d); // Ispisuje budući datum

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Postavljanje godišnje vrijednosti objekta datuma</title>
</head>
<body>
    <script>
    var d = new Date();
    d.setFullYear(d.getFullYear() + 2);
    document.write(d); // Ispisuje budući datum
    </script>
</body>
</html>

Isto tako, metodu setMonth() možete koristiti za postavljanje ili izmjenu mjesečnog dijela objekta Date.

var d = new Date(); // Trenutni datum i vrijeme
d.setMonth(0); // Postavlja mjesec na 0, januar
document.write(d);

Metoda setMonth() zahtijeva cijelu vrijednost od 0 do 11, ako postavite vrijednost mjeseca veću od 11, godišnja vrijednost datuma će se povećavati. Drugim riječima, vrijednost 12 rezultuje time da se vrijednost godine poveća za 1, a vrijednost mjeseca postavi na 0, kao što je prikazano u sljedećem primjeru:

var d = new Date(2020, 10, 12); // Novembar 12, 2020
d.setMonth(12); // Postavlja mjesec do 12, novi datum će biti Novembar 12, 2021
document.write(d);

Slično tome, možete izmijeniti datumski dio datumskog objekta, ovako:

var d = new Date(2020, 10, 12); // Novembar 12, 2020
d.setDate(15); // Postavlja datum do 15, novi datum će biti Novembar 15, 2020
document.write(d);

Metoda setDate() zahtijeva cijelu vrijednost od 1 do 31. Takođe, ako prosljedite vrijednosti veće od broja dana u mjesecu, mjesec će se povećavati. Pogledajmo primjer:

var d = new Date(2020, 10, 12); // Novembar 12, 2020
d.setDate(36); // Postavlja dan do 36, novi datum će biti Januar 5, 2021
document.write(d);

Postavljanje sata, minuti i sekundi

Metode postavljanja vremenskih vrijednosti su takođe prilično ravne. SetHours(), setMinutes(), setSeconds(), setMilliseconds() mogu se koristiti za postavljanje sata, minuti, sekundi i milisekundi dijela objekta Date. Svaka metoda uzima cjelobrojne vrijednosti kao parametre. Sati se kreću od 0 do 23, minute i sekunde se kreću od 0 do 59, a milisekunde se kreću od 0 do 999. Pogledajmo primjer:

var d = new Date(2020, 10, 12); // Novembar 12, 20202 00:00:00
    d.setHours(8);
    d.setMinutes(30);
    d.setSeconds(45);
    d.setMilliseconds(600);
    document.write(d);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Postavljanje sata, minuta i sekundi vrijednosti objekta datuma</title>
</head>
<body>
    <script>
        var d = new Date(2020, 10, 12); // Novembar 12, 20202 00:00:00
        d.setHours(8);
        d.setMinutes(30);
        d.setSeconds(45);
        d.setMilliseconds(600);
        document.write(d);
    </script>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako: